百度地图

lbsyun.baidu.com/

1.申请key

2.配置

2.1.src下创建bmpgl.js

// bmpgl.js
export function BMPGL(ak) {
    return new Promise(function(resolve, reject) {
      window.init = function() {
        // eslint-disable-next-line
        window.BMap = BMapGL
        resolve(BMapGL)
      }
      const script = document.createElement('script')
      script.type = 'text/javascript'
       //`http://api.map.baidu.com/api?v=版本&type=webgl&ak=申请的key&callback=触发的回调函数` 
      script.src = `http://api.map.baidu.com/api?v=3.0&type=webgl&ak=${ak}&callback=init`
      script.onerror = reject
      document.head.appendChild(script)
    })
  }

3.使用map

map 属性文档

mapopen-pub-jsapi.bj.bcebos.com/jsapi/refer…

3.1 引入map

import { BMPGL } from "@/bmpgl.js";

3.2 使用map

 /**
 *	 pbConfig.baidugpsKey => 你申请的key
 */
 BMPGL(pbConfig.baidugpsKey).then(BMapGL=>{
 	// 在这里写你要干的事情
 })

3.3 生成基础地图

// 地图画布
var map = new BMapGL.Map("container");          // 创建地图实例 
// 标识点
var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
// 把标识点放到地图中  第二个参数为地图 初始缩放倍数
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

3.4 绘制标注(图形)

官方示例

lbs.baidu.com/jsdemo.htm#…

3.4.1 点

var point = new BMapGL.Point(116.404, 39.915);   
var marker = new BMapGL.Marker(point);        // 创建标注   
map.addOverlay(marker);                     // 将标注添加到地图中

3.4.2 多边形

var polygon = new BMapGL.Polygon([
        new BMapGL.Point(116.387112,39.920977),
        new BMapGL.Point(116.385243,39.913063),
        new BMapGL.Point(116.394226,39.917988),
        new BMapGL.Point(116.401772,39.921364),
        new BMapGL.Point(116.41248,39.927893)
    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polygon);

3.4.3 圆

// 绘制中心点
var pointR = new BMap.Point(经度, 维度);
// 绘制圆
var circle = new BMap.Circle(pointR, self.radius, {
    strokeColor: "blue",
    strokeWeight: 2,
    strokeOpacity: 0.5
}); 
//绘制到画布中
map.addOverlay(circle);

3.5定位

3.5.1 浏览器定位

pc 有误差 移动端无误差 (可行)

var map = new BMapGL.Map("allmap");
    var point = new BMapGL.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);

    var geolocation = new BMapGL.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMapGL.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            alert('您的位置：' + r.point.lng + ',' + r.point.lat);
        }
        else {
            alert('failed' + this.getStatus());
        }        
    });

3.5.2 IP定位

不准确

var map = new BMapGL.Map("allmap");
    var point = new BMapGL.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);
    
    function myFun(result){
        var cityName = result.name;
        map.setCenter(cityName);
        alert("当前定位城市:" + cityName);
    }
    var myCity = new BMapGL.LocalCity();
    myCity.get(myFun); 

3.5.3 定位SDK辅助定位

var map = new BMapGL.Map("allmap");
    var point = new BMapGL.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);
            
    var geolocation = new BMapGL.Geolocation();
    // 开启SDK辅助定位
    geolocation.enableSDKLocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            alert('您的位置：' + r.point.lng + ',' + r.point.lat);
        }
        else {
            alert('failed' + this.getStatus());
        }        
    });

3.6 测距

测量标注点 在不在图形标注范围内

方法一 使用 BMapLib

保留

方法二 计算两点之间的经纬度

参数为 标记点一， 标记点二

map.getDistance(pointA, pointB)