小程序商城运营优化_Vue的百度地图插件尝试使用

2021-01-11 14:42| 发布者: | 查看: |

Vue的百度地图插件尝试使用       本篇文章主要介绍了Vue的百度地图插件尝试使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

ak 是在百度地图开发者平台申请的密钥 详见

地图视图

BmView 是用于渲染百度地图实例可视化区域的容器

使用 Bmview 渲染一个地图实例:

 template id="baidu" 
 baidu-map 
 bm-view /bm-view 
 /baidu-map 
 /template 

给地图添加一个缩放控件

 bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" /bm-navigation 

把控件放到我们渲染的地图实例里就可以了

效果如下:

完整代码如下:

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1.0" 
 meta http-equiv="X-UA-Compatible" content="ie=edge" 
 title baidumap /title 
 script src="vue" /script 
 script src="vue-baidu-map" /script 
 style 
 #map{
 width: 1000px;
 height: 500px;
 /style 
 /head 
 body 
 div id="map" 
 baidu /baidu 
 /div 
 template id="baidu" 
 baidu-map 
 bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" /bm-navigation 
 bm-view /bm-view 
 /baidu-map 
 /template 
 script 
 Vue.use(VueBaiduMap.default, {
 ak: 'YOUR_APP_KEY',
 ponent("baidu",{
 template:'#baidu'
 new Vue({
 el:'#map'
 /script 
 /body 
 /html 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部