vue中使用百度地图步骤

千秋~

于 2020-11-16 14:54:17 发布

阅读量413

点赞数 1

分类专栏： vue js 文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_44724176/article/details/109721012

版权

js 同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

vue中使用百度地图步骤

安装vue-baidu-map插件

npm install vue-baidu-map -save

在main.js中引用插件

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: ''
})

其中ak是需要去百度地图官网进行申请

在需要使用的地方直接插入组件

<baidu-map class="mapelcol" @ready="init"></baidu-map>

方法

 init({BMap, map}) {
        this.map = map;
        // 初始化地图,设置中心点坐标
        var point = new BMap.Point(120.16754,34.355101);
        map.centerAndZoom(point, 12);

        // 设置地图显示的城市 此项是必须设置的
        map.setCurrentCity("盐城"); 

        // 添加鼠标滚动缩放
        map.enableScrollWheelZoom(true);

        //展示数据所有经纬度的标注和自定义标注图片
        for(var i in mapdata) {
          var pt = new BMap.Point(mapdata[i].longitude,mapdata[i].latitude);
          var myIcon = new BMap.Icon('../../../static/mapicon.png', new BMap.Size(32,32));
          var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
          map.addOverlay(marker2);
        }
    },