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

这篇文章主要讲解了“vue怎么整合百度地图显示指定地点信息”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue怎么整合百度地图显示指定地点信息”吧！

先看看效果图

一、安装相关依赖

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";

四、绘制地图

创建一个容器展示地图，给容器指定一个id，根据页面的具体需求指定容器的宽和高

<div class="map">    <div id="container"  ref="allmap"></div></div>

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

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

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

var map;let geoc = null;

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

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("岳阳楼"); //要展示的地点    },

在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怎么整合百度地图显示指定地点信息这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！