在vue.js的vue-cli支架中使用百度地图API的一个例子

第一步是向百度地图开发者申请密钥。

1.申请关键(百度地图开放平台-开发文档- web开发- JavaScript API -立即使用-创建应用)

2.密钥申请成功后，

第二步是将其引入到项目需要的模板中，如下所示：

项目路径

index.html存储地图链接，代码如下

在百度地图开放平台服务介绍中选择我们需要的地图类型。可以观看演示演示

选择我们需要的百度地图类型：http://lbsyun.baidu.com/index.php?

然后在一个模板例子中实现：APP.vue代码如下

模板div id=' app ' div id=' all map ' ref=' all map '/div router-view/router-view//请记住，模板必须具有渲染/div/模板脚本导出默认值{name:' app '。methods : { map(){ let map=new BMap。地图(这个。$ refs . all map)；//创建地图实例地图。居中和缩放(新bmap。点(114.30，30.60)，11)；//初始化地图，设置中心点坐标(经纬度/城市名称)和地图级别地图。add control(new map。maptype control({//添加映射类型控件maptypes: [bmap _ normal _ map，bmap _ hybrid _ map]})；Map.setCurrentCity('武汉')；//设置地图上显示的城市。此项目必须设置为map . enablescrolwheelzoom(true)；//打开鼠标滚轮缩放//map . setmapstyle({ style : ' midnight ' })；//map style} }，mounted(){ //调用函数this . map()} }/script style # app { font-family : ' avenir '，Helvetica，arial，sans-serif；-web kit-font-smooth :抗锯齿；-moz-OSX-font-smooth :灰度；文本对齐：中心；color : # 2c 3e 50；边距-top : 60px；}/*设置地图的宽度和高度*/# all map { height : 500 px；飞越：隐藏；} /style在html页面中使用百度界面的步骤也如上所示

如有不足请谅解！希望能给你带来帮助。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。如果你想了解更多，请查看下面的相关链接