百度地图使用

百度地图api的使用

一、初始化地图

代码如下（示例）：
我们可以在methods里面定义一个方法
这里的this.map是在data定义的方便在该vue文件里面调用

this.map=new BMap.Map("zdmap"); // 创建Map实例
let point=new BMap.Point(116.404, 39.915);//创建中心点
this.map.centerAndZoom(point,12)//设置地图级别
this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 true为开启 false为关闭
//以上代码就可以初始化地图了

二、添加标记点

代码如下（示例）：
上面代码已经创建好了
我们可以接着在methods创建一个方法例如叫addMarker
在实际开发工作中,我们一般会通过接口返回标记点数组,这个时候需要我们通过for循环添加标记点

addMarker(){
     //这里的longitude,latitude是要添加标记的经纬度
    let markerOne=new BMap.Marker(new BMap.Point(longitude,latitude));
    //在地图上添加标记
    map.addOverlay(markerOne);
}

三、自定义添加marker

代码如下（示例）：
我们可以接着在methods创建一个方法例如叫customizeMarker

//我们可以在data里面定义图标的地址
data(){
    return {
       myIcon: require('./img/afyhc.png')
   }
}

customizeMarker(){
  //创建图标
  let myIcon = new BMapGL.Icon(this.myIcon, new BMapGL.Size(52, 26));
  //创建自定义图标标记点
  let mkr=new new BMap.Point(longitude,latitude);
  let marker = new BMapGL.Marker(mkr, {
    icon: myIcon
});
 // 将标注添加到地图
 thisap.addOverlay(marker);
}