BaiduMap插件运用

最新推荐文章于 2024-09-23 17:27:56 发布

火火火火_Shy

最新推荐文章于 2024-09-23 17:27:56 发布

阅读量985

点赞数

文章标签： vue.js jquery vant

本文链接：https://blog.youkuaiyun.com/yangmy_Shy/article/details/121493771

版权

本文介绍了如何在Vue.js项目中结合jQuery，有效利用BaiduMap插件实现地图功能。通过引入相关库，设置地图中心点，添加标记，实现了交互式的地图应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

main.js引入百度插件
//下载百度地图插件 npm i vue-baidu-map --save    npm install vue-baidu-map
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  /* 申请的百度密钥，可以在百度地图官网申请 */
  ak: 'dQzK8G22g7gFdQkrKvGr9G5vYVr7GQD8'
})

vue页面
<baidu-map id="allmaps" @ready="mapReady" :scroll-wheel-zoom="true"></baidu-map>

js:

/** 默认地图坐标 运动轨迹*/
mapReady({BMap, map}) {
  var that = this;
  that.BMap = BMap;
  that.map = map;
  that.ditu();
},

ditu() {
  var BMap = this.BMap;
  var map = this.map;
  var that = this;
  map.clearOverlays();
  // 选择一个经纬度作为中心点
  var geolocation = new BMap.Geolocation();
  geolocation.getCurrentPosition(function (r) {
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
      if (that.trajectoryList.length > 0) {
        this.point = new BMap.Point(that.trajectoryList[0].lon, that.trajectoryList[0].lat);
      } else {
        this.point = new BMap.Point(r.point.lng, r.point.lat);
      }
      map.centerAndZoom(this.point, 12);
      var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
        scale: 0.6,//图标缩放大小
        strokeColor: '#1890ff',//设置矢量图标的线填充颜色
        strokeWeight: '2',//设置线宽
      });
      var icons = new BMap.IconSequence(sy, '10', '30');
      var pois = [];
      for (var i = 0; i < that.trajectoryList.length; i++) {
        pois.push(new BMap.Point(that.trajectoryList[i].lon, that.trajectoryList[i].lat));
      }
      var polyline = new BMap.Polyline(pois, {
        enableEditing: false,//是否启用线编辑，默认为false
        enableClicking: true,//是否响应点击事件，默认为true
        icons: [icons],
        strokeWeight: '3',//折线的宽度，以像素为单位
        strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
        strokeColor: "#ff1818" //折线颜色
      });
      map.addOverlay(polyline);          //增加折线
    } else {
      // alert('failed' + this.getStatus());
    }
  }, {enableHighAccuracy: true})
},

removeBmap() {
  var map = this.map;
  map.clearOverlays();
},

css:

#allmaps {
  width: 100%;
  height: 600px;
  margin: 0 auto;
}