Vue.js学习之路之使用百度地图API

需求说明：

用vue开发外卖平台，在外卖平台中需要知道商家地址信息，这时就需要借用百度地图API。

解决方案：

    步骤一：申请百度地图密钥；

    步骤二：在index.html中添加百度地图JavaScript API接口；

//注意：Vue要在头部引用js，这样组件才能获取
<script  type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KCzp8claYra8uYAvahElV9oKUT6j7Gx1" ></script>

//在组件中添加地图容器

<div id="mapContainer" style="width:100%;height:500px"></div> 

 步骤三：在webpack.base.conf.js配置文件中配置BMap，在module.exports 中与entry平级；

externals: {
    "BMap": "BMap"
  }

步骤四：在地图组件中import BMap，否则会出现"BMap undefined"；

import BMap from 'BMap';

步骤五：创建地图对象，在mounted生命周期调用；

mounted() { //Vue生命周期-挂载完成（访问DOM元素）
      this.bdMap();
  },
  methods: {
    

bdMap() {
    //基础调用
    let map = new BMap.Map('mapContainer'); //创建地图，选择挂载节点
    map.centerAndZoom("克拉玛依",15); //设置地图中心城市及缩放倍数
    map.addControl(new BMap.MapTypeControl());//添加“地图类型控件”
    map.addControl(new BMap.NavigationControl());//添加“缩放控件”
    map.enableScrollWheelZoom(true);//开启鼠标滚轮放大
    map.enableDoubleClickZoom(true);//开启双击放大

    //以下为点击添加标注气泡，获取点击点坐标
    map.addEventListener('click', function(e) { //地图点击事件
        map.clearOverlays();//清除所有标注
        let lat1 = e.point.lat; //纬度
        let lng1 = e.point.lng; //经度
        // let point = new BMap.Point(lat, lng);
        var marker = new BMap.Marker(new BMap.Point(lng1, lat1)); // 创建点
        map.addOverlay(marker);//添加点
        console.log(lat1 , lng1);
    });
}

  }

 

  map.addEventListener说明

使用中可以在控制台中输出e，看看里面有什么你需要的信息