vue调用百度地图文档与说明

一

申请百度地图ak

二

vue项目index.html引入

三

webpack.base.conf.js

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  externals: {
    "BMap": "BMap"
  },
}

四

调用地图页面

import BMap from 'BMap'

地图配置与说明

初始化地图

init () {
	  // 初始化地图
      let _this = this
      this.map = new BMap.Map("myBmap");  // myBmap为展示区域的div ID
      this.map.centerAndZoom(new BMap.Point('120.086165', '32.581458'), 10); // 定义中心坐标点以及缩放大小
      this.map.setMinZoom(10) // 设置缩放最小范围
      this.map.enableScrollWheelZoom(); // 开启滚轮缩放, 默认禁用
      var map = this.map
      // 显示一个省份（隐藏其他地区，只显示需要展示的地区）
      var cityName = '江苏省';
      var bdary = new BMap.Boundary();
          bdary.get(cityName, function (rs) {       //获取行政区域
        // map.clearOverlays();        //清除地图覆盖物
        //for循环都删除掉了，只剩下这个
        //东西经南北纬的范围
        var EN_JW = "180, 90;";         //东北角
        var NW_JW = "-180,  90;";       //西北角
        var WS_JW = "-180, -90;";       //西南角
        var SE_JW = "180, -90;";        //东南角
        //4.添加环形遮罩层
        var ply1 = new BMap.Polygon(rs.boundaries[4] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor: "none", fillColor: "#12223d", fillOpacity:1, strokeOpacity: 0.5 }); //建立多边形覆盖物

        map.addOverlay(ply1);
        //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
        var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#00f",fillColor: "" });
        map.addOverlay(ply);
      });

	   var styleJson = JSONMAP // 个性化地图，百度个性化地图json,外部引入
      map.setMapStyleV2({styleJson:styleJson});
      }

配置坐标点

for (var i = 0; i < _this.DoorList.length; i ++) {  // 后台接口返回坐标数据
        var point = new BMap.Point(_this.DoorList[i].lon, _this.DoorList[i].lat); // point为显示点的坐标经纬度
        var label = new BMap.Label(_this.DoorList[i].name,{offset:new BMap.Size(-15,30)}); // 该坐标点显示的文本信息与显示位置
        var myIcon = new BMap.Icon(Door, new BMap.Size(30,30)); // Door为根据需要更改坐标点的样式
        var marker = new BMap.Marker(point, {icon:myIcon}); 　// 生成坐标点
        map.addOverlay(marker); // 地图添加该坐标点
        marker.setLabel(label); // 把文本信息设置到maker上 
        // 以下操作为根据需要默认不显示文本信息，鼠标经过坐标点是显示
        label.setStyle({  // 隐藏坐标点文本信息
          display: "none"
        });
        // 鼠标经过时显示坐标点文本信息
        marker.addEventListener("mouseover", function(e) {
          var label = this.getLabel();
          label.setStyle({
            display: "block"
          });
        });
        // 鼠标离开时隐藏文本信息
        marker.addEventListener("mouseout", function(e) {
          var label = this.getLabel();
          label.setStyle({
            display: "none"
          });
        });
        marker.disableMassClear();  //　禁止清除该坐标点（根据需求不同自己设置）
        marker.setZIndex(400)  // 指定改覆盖物的层级，与Z-index效果相同
      }

配置折线

根据业务需求显示多条折线

for (let i = 0; i < _this.GPSList.length; i++) {
        var pois = [] // 定义折线数组的GPS，由多个经纬度点组成
        for (let j = 0; j < _this.GPSList[i].gps.length; j++) {
         pois1[i] = new BMap.Point(_this.GPSList[i].gps[j].lon, _this.GPSList[i].gps[j].lat) // 生成
        }

        // 添加折线
        var polyline1 =new BMap.Polyline(pois1, {
          enableEditing: false,//是否启用线编辑，默认为false
          enableClicking: true,//是否响应点击事件，默认为true
          strokeWeight:'3',//折线的宽度，以像素为单位
          strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
          strokeColor:"yellow" //折线颜色
        }); // 创建折线
        _this.Vpolyline.push(polyline1)
        map.addOverlay(polyline1);   //显示折线
        polyline1.addEventListener("click",attributeDian); // 给折线添加点击事件
      }
      // 折线点击事件调用外部函数
      function attributeDian (item) {
        _this.ClickDianLan(item.target.na)
      }

起点=》终点规划路线

// 路线
      let that = this
      var pointA = new BMap.Point(StartInfo.lon, StartInfo.lat); // 起点坐标
      var pointB = new BMap.Point(EndInfo.lon, EndInfo.lat); // 终点坐标
      var driving = new BMap.DrivingRoute(this.maps, {renderOptions:{map: this.maps, autoViewport: true},
        onPolylinesSet:function(routes) {
          let searchRoute = routes[0].getPolyline();//导航路线
          that.maps.addOverlay(searchRoute);
        },
        onMarkersSet:function(routes) {
          var label = new BMap.Label(StartInfo.name,{offset:new BMap.Size(0,-15)});
          var label1 = new BMap.Label(EndInfo.name,{offset:new BMap.Size(0,-15)});
          routes[0].marker.setLabel(label);
          routes[routes.length-1].marker.setLabel(label1);
              // that.maps.removeOverlay(routes[0].marker); //删除起点
              // that.maps.removeOverlay(routes[1].marker);//删除终点
        }});
      driving.search(pointA, pointB); // 生成路线

个性化地图JSONMAP	配置与下载地址：http://lbsyun.baidu.com/customv2/help.html