Vue框架中如何使用Baidu地图

标签：Baidu baidu Vue 框架 map 地图 v3 vue

1.安装 vue-baidu-map 依赖

　　npm install vue-baidu-map --Save

2.在Vue项目中src找到main.js进行引用

　　import BaiduMap from 'vue-baidu-map-v3'

　　Vue.use(BaiduMap, {   　　　　ak: '百度地图api申请密钥' // 百度地图密钥 　　}) 3.可直接引用或者封装BaiduMap.vue  　　<template> 　　　　<baidu-map class='bm-view' :center="{ lng: 116.404, lat: 39.915 }" :zoom="15" :scroll-wheel-zoom="true" :mapStyle="mapStyle"></baidu-map> 　　</template> 　　/** 　　*　　center 设置中心点坐标 { lng：京都， lat：维度 } 　　*　　zoom 展示级别 　　*　　scroll-wheel-zoom 是否开启鼠标滚轮缩放 　　*　　mapStyle 主题设置 　　**/ 　　以上写法是直接引用也可以通过init初始化map的参数   4.在地图中画点线图片 　　阅读： https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/addOverlay 　　案例： 　　<template> 　　　　<baidu-map class='bm-view' :center="{ lng: 116.404, lat: 39.915 }" :zoom="15" :scroll-wheel-zoom="true" :mapStyle="mapStyle">

　　　　　　<bm-marker :position="{lng: 116.404, lat: 39.915}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
      　　<bm-label content="我爱北京天安门" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
    　　</bm-marker>

　　　　</baidu-map> 　　</template> 　 以上就是vue简单使用baidumap 　 可参考：https://dafrok.github.io/vue-baidu-map/#/zh/start/installation   　注意：如果地图出现加载白块或者主题无法更换请结合以下方式尝试 　1.查看安装版本是否是v3如果不是请安装 v3版本  npm install vue-baidu-map-v3 --Save 　2.在index.html入口中添加 　　<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=密钥&s=1"></script>  

标签：Baidu,baidu,Vue,框架,map,地图,v3,vue
From： https://www.cnblogs.com/dekui/p/17375069.html