vue使用百度地图api,vue调用地图

　　主要介绍vue全球接入百度地图的实现实例，根据实例代码非常详细，有一定的参考价值。感兴趣的朋友可以参考一下。

目录

　　前言一，获取ak密钥二，集成步骤总结

前言

　　本文主要教大家如何将百度地图整合到我们的vue项目中。

一、获取ak密钥

　　1.登录https://lbsyun.baidu.com/.

　　注册百度地图开放平台账号，填写认证信息，创建应用。

　　创建应用程序后，您可以在类似的界面中获得我们的AK密钥。

　　注意：IP白名单要合理配置。

　　为了测试方便，我在这里设置了0.0.0.0/0。

二、整合步骤

　　获得ak密钥后，它可以与我们的VUE项目集成。

　　1.npm下载包

　　代码如下(示例):

　　npm安装-保存vue-百度-地图-注册表=https://registry.npm.taobao.org

　　2.在main.js文件中介绍它

　　代码如下(示例):

　　从“vue-baidu-map”导入BaiduMap

　　Vue.use(BaiduMap，{

　　//ak键

　　AK:“pynskau 5 yndinxabac 3 agtroxny 6 wkey”

　　})

　　3.页面介绍

　　代码如下(示例):

　　data(){

　　返回{

　　//百度地图信息设置

　　//地址信息

　　地址：空，

　　中心：{lng: 0，lat: 0}，

　　//地图显示级别

　　变焦：13，

　　}

　　}

　　方法：{

　　处理程序({BMap，map}) {

　　this . center . LNG=116.419878；

　　this . center . lat=39.956823；

　　this . zoom=this . zoom；

　　},

　　getClickInfo(e) {

　　//创建地理编码实例

　　const myGeo=新的BMap。geocoder()；

　　let _ this=this

　　//根据坐标逆向解析地址

　　myGeo.getLocation(新的BMap。点(e.point.lng，e.point.lat)，函数(结果){

　　如果(结果){

　　_ this . form . ware house location=result . address

　　}

　　});

　　this . center . LNG=e . point . LNG；

　　this . center . lat=e . point . lat；

　　}

　　}

　　风格。地图框{

　　宽度：100%；

　　身高：100%；

　　}

　　/风格

　　翻译

　　有一点需要注意。记得在方法中地址反解析时，在反解析方法外获取这个值let _ this=this

总结

　　关于vue全球通接入百度地图的实现实例这篇文章到此为止。更多关于vue全球接入百度地图的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。