百度地图开放平台 https://lbs.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5
javaScript API https://lbs.baidu.com/index.php?title=jspopularGL
百度地图实例 https://lbsyun.baidu.com/index.php?title=open/jsdemo
Vue Baidu Map文档 https://dafrok.github.io/vue-baidu-map/#/zh/index
在Vue中 我们可以使用 Vue Baidu Map来构建我们的地图应用,上面这个是中文文档。
在开始之前我首先申请了密钥:百度地图开放平台 -> 控制台 -> 应用管理 -> 我的应用 -> 创建应用
1. 安装
$ npm install vue-baidu-map --save
2. main.js 全局引入注册
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'YOUR_APP_KEY'
})
3. 组件中使用
<template>
<div class="BaiDuMap">
<baidu-map
:center="center"
:zoom="zoom"
:scroll-wheel-zoom="true"
style="width: 100%; height: 100%"
@ready="handler"
@click="getClickInfo"
@moving="syncCenterAndZoom"
@moveend="syncCenterAndZoom"
@zoomend="syncCenterAndZoom"
>
<!-- 必须给容器指高度,不然地图将显示在一个高度为0的容器中,看不到 -->
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<bm-geolocation
anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
:showAddressBar="true"
:autoLocation="true"
></bm-geolocation>
<bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
</baidu-map>
</div>
</template>
<script>
export default {
data() {
return {
// 地址信息
address: null,
center: { lng: 0, lat: 0 },
//地图展示级别
zoom: 11,
};
},
methods: {
handler({ BMap, map }) {
this.center.lng = 116.404;
this.center.lat = 39.915;
this.zoom = this.zoom;
},
getClickInfo(e) {
// 创建地理编码实例
const myGeo = new BMap.Geocoder();
// 根据坐标逆解析地址
myGeo.getLocation(new BMap.Point(e.point.lng, e.point.lat), (result) => {
console.log(result, "result-->>>>");
if (result) {
this.address = result.address;
}
});
this.center.lng = e.point.lng;
this.center.lat = e.point.lat;
},
syncCenterAndZoom(e) {
console.log(e.target, 'e.target-->>>>')
const { lng, lat } = e.target.getCenter();
this.zoom = e.target.getZoom();
},
},
};
</script>
<style scoped>
.BaiDuMap {
width: 100%;
height: 100%;
}
</style>
BMap报错,没定义,用window.BMap
效果:
参考:
https://www.jianshu.com/p/be11e4d4d626
vue-baidu-map 使用("踩坑")