vue使用百度地图api,vue集成地图

　　有些项目需要地图嵌入。本文主要介绍如何在vue项目中调用百度地图API。其他地图调用类似。有需要的朋友可以借鉴一下，希望能有所帮助。

　　:

目录

　　 1.账户注册2。关键获取3。项目创建4。项目导入5。效果展示。

1.账号注册

　　注册账号，登录百度地图开放平台。

　　地址：https://lbsyun.baidu.com/index.php? title=jspopularlg

2.获取密钥

　　进入开发文档并申请密钥。

3.创建项目

4.项目导入

　　现在我们已经获得了密钥，我们可以将它导入到项目中。

　　首先安装百度地图。

　　npm安装vue-百度-地图-保存

　　然后注册(这里我用的是部分注册)

　　//部分注册百度地图

　　从“vue-Baidu-map/components/map/map . vue”导入BaiduMap

　　最后，在接口文件中导入。

　　模板

　　Baidu-map:center= center :zoom= zoom @ ready= handler style= height:1080 px @ click= getClickInfo :scroll-wheel-zoom= true

　　/百度-地图

　　/模板

　　脚本

　　导出默认值{

　　名称： TestBaiDu ，

　　data () {

　　返回{

　　中心：{液化天然气：109，48529967，纬度：36 }，

　　缩放：13倍

　　}

　　},

　　方法：{

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

　　var point=新的BMap。点(109，36)35676 . 48638638667

　　map.centerAndZoom(点，13)

　　var marker=new map . marker(point)//创建标签

　　Map.addOverlay(marker) //向地图添加标签

　　var circle=新的BMap。Circle(point，6，{ strokeColor: Red ，strokeWeight: 6，strokeOpacity: 1，Color: Red ，fillColor: #f03 })

　　map.addOverlay(圆形)

　　},

　　getClickInfo (e) {

　　控制台.日志(e.point.lng)

　　控制台.日志(e.point.lat)

　　this.center.lng=e.point.lng

　　this.center.lat=e点

　　}

　　}

5.效果展示

　　以上是vue项目实现便捷接入百度地图API的详细内容。更多关于vue接入百度地图API的信息，请关注我们的其他相关文章！

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