vue百度地图自动定位,vue项目引入百度地图
主要介绍vue整合百度地图显示指定地点的信息。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。有需要的朋友下面和边肖一起学习。
目录
一、安装相关依赖项二。在main.js III中引用它们。创建地图工具map.js IV。先画个图，看看效果图。
一、安装相关依赖
npm i -保存vue-百度-地图
二、在main.js中引用
从“vue-baidu-map”导入BaiduMap
Vue.use(BaiduMap，{
AK:‘你的钥匙(百度地图开放API官网可以免费申请)’
})
三、创建地图工具 map.js
导出功能MP(ak) {
返回新承诺(功能(解决，拒绝){
window.init=function () {
解决(BMap)
}
var script=document . createelement( script )；
script . type= text/JavaScript ；
script . src= http://API . map . Baidu . com/API？V=2.0ak=您的密钥 回调=init
script . on error=reject；
document.head.appendChild(脚本)；
})
}
将此工具引入需要地图的文件。
从“@/utils/map.js”导入{ MP }；
四、绘制地图
1.创建一个容器显示图，给容器分配一个id，根据页面的具体要求指定容器的宽度和高度。
div class=map
div id=" container " style=" height:300 px；宽度：100% ref=allmap/div
/div
2.在数据中定义所需的数据。
data() {
返回{
dialogMap: false，
地图点名称： ，
mapGetshow: true
}
}
3.定义全球地图地图对象和地理编码器地理编码对象。
var图；
设geoc=null
4.创建一个定位方法并添加要显示的位置的名称，该名称也可以在此处动态指定。
mapNameChange() {
让那个=这个，
点，
marker=null
让local=new BMap。本地搜索(地图，{
renderOptions: { map: map }，
onSearchComplete: (res)={
if (local.getResults()！=未定义){
map . clear overlays()；//清除地图上的所有封面
if (local.getResults()。getPoi(0)) {
point=local.getResults()。getPoi(0)。点；//获取第一次智能搜索的结果
map.centerAndZoom(point，10)；
标记=新的BMap。标记(点)；//创建批注
map . add overlay(marker)；//将标签添加到地图
marker . enable dragging()；//可以拖动
geoc.getLocation(point，function (rs) {
var add comp=RS . address components；
that.mapPointName=
添加公司省份
,
添加公司城市
,
addComp.district
,
添加公司街道
,
add comp . street number；
});
}否则{
Console.log(“未找到结果”)
}
}否则{
Alert(“未找到结果”)；
}
},
});
Local.search(岳阳楼)；//要显示的位置
},
5.在挂载的函数中调用上述方法，绘制地图。
已安装(){
这个。$nextTick(function () {
var _ this=this
MP(_this.ak)。然后((BMap)={
让那个=这个；
this.dialogMap=！this.dialogMap
if (that.mapGetshow) {
map=新BMap。地图(“容器”)；//存储地图的容器的id
geoc=新的BMap。geocoder()；
map . enablescrollwheelzoom()；
}
_this.mapNameChange() //调用方法定位位置。
});
});
}
关于vue集成百度地图显示指定位置信息的这篇文章到此为止。更多关于vue百度地图显示位置的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。