vue整合百度地图显示指定地点信息

顺亿

2026-09-16 • 👁 0人浏览过

目录一、安装相关依赖二、在main.js中引用三、创建地图工具 map.js 四、绘制地图先看看效果图一、安装相关依赖 npm i --save vue-baidu-map 二、在main.js中引用

import BaiduMap from "vue-baidu-map"
Vue.use(BaiduMap,{
  ak: '你的密钥(百度地图开放API官网可免费申请)'
})

三、创建地图工具 map.js

export function MP(ak) {  
    return new Promise(function (resolve, reject) {  
      window.init = function () {  
        resolve(BMap)  
      }  
      var script = document.createElement("script");  
      script.type = "text/javascript";  
      script.src = "http://api.map.baidu.com/api?v=2.0&ak="+"你的密钥"+"&callback=init";  
      script.onerror = reject;  
      document.head.appendChild(script);  
    })  
  }

在需要用到地图的文件引入该工具 import { MP } from "@/utils/map.js"; 四、绘制地图 1、创建一个容器展示地图，给容器指定一个id，根据页面的具体需求指定容器的宽和高

2、在data中定义需要用到的数据

 data() {
    return {
        dialogMap: false,
    mapPointName: "",
    mapGetshow: true
    }
}

3、定义全局的map地图对象和geocoder地理编码对象

var map;
let geoc = null;

4、创建一个定位地点的方法，添加要展示的地点的名称，此处也可动态指定

mapNameChange() {
      let that = this,
        point,
        marker = null;
      let local = new BMap.LocalSearch(map, {
        renderOptions: { map: map },
        onSearchComplete: (res) => {
          if (local.getResults() != undefined) {
            map.clearOverlays(); //清除地图上所有覆盖物
            if (local.getResults().getPoi(0)) {
              point = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
              map.centerAndZoom(point, 10);
              marker = new BMap.Marker(point); // 创建标注
              map.addOverlay(marker); // 将标注添加到地图中
              marker.enableDragging(); // 可拖拽
              geoc.getLocation(point, function (rs) {
                var addComp = rs.addressComponents;
                that.mapPointName =
                  addComp.province +
                  ", " +
                  addComp.city +
                  ", " +
                  addComp.district +
                  ", " +
                  addComp.street +
                  ", " +
                  addComp.streetNumber;
              });
            } else {
              console.log("未搜索到结果")
            }
          } else {
            alert("未搜索到结果");
          }
        },
      });
      local.search("岳阳楼"); //要展示的地点
    },

5、在mounted函数中调用上述方法并绘制地图

mounted() {
    this.$nextTick(function () {
      var _this = this;
      MP(_this.ak).then((BMap) => {
        let that = this;
        this.dialogMap = !this.dialogMap;
        if (that.mapGetshow) {
          map = new BMap.Map("container");    //存放地图容器的id
          geoc = new BMap.Geocoder();
          map.enableScrollWheelZoom();
        }
        _this.mapNameChange()    //调用定位地点的方法
      });
    });
  }

到此这篇关于vue整合百度地图显示指定地点信息的文章就介绍到这了,更多相关vue 百度地图显示地点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！您可能感兴趣的文章: vue3实现模拟地图站点名称按需显示的功能(车辆模拟地图) Vue+OpenLayers 创建地图并显示鼠标所在经纬度(完整代码) vue中PC端使用高德地图实现搜索定位、地址标记、弹窗显示定位详情(完整实例) vue中mapbox地图显示一半的问题及解决方法 vue使用天地图、openlayers实现多个底图叠加显示效果在 Vue 3 中上传 KML 文件并在地图上显示的实现方法