98 lines
2.5 KiB
Markdown
98 lines
2.5 KiB
Markdown
|
vue引入百度地图
|
|||
|
|
====================================
|
|||
|
|
|
|||
|
|
* ### 首先安装百度地图依赖
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm install vue-baidu-map --save
|
|||
|
|
```
|
|||
|
|
* ### 申请百度地图开放平台百度地图密钥
|
|||
|
|
|
|||
|
|
* （申请链接http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey）根据网站提示填写应用信息。
|
|||
|
|
* 在应用类型出选择浏览器端
|
|||
|
|
* ip白名单填写\*号
|
|||
|
|
* ### 在main.js中全局注册
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
import Vue from 'vue'
|
|||
|
|
//添加百度地图
|
|||
|
|
import BaiduMap from 'vue-baidu-map'
|
|||
|
|
Vue.use(BaiduMap,{
|
|||
|
|
ak:'GHYWGm6cKODTU3BzuKDlEqARxc2ZEf3c'
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
* ### 如果使用的是quasar-cli
|
|||
|
|
|
|||
|
|
* 在src/boot 下创建启动文件baiduMap.js 添加以下内容
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
import Vue from 'vue'
|
|||
|
|
//添加百度地图
|
|||
|
|
import BaiduMap from 'vue-baidu-map'
|
|||
|
|
Vue.use(BaiduMap,{
|
|||
|
|
ak:'你申请的百度地图开放平台应用key'
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
* 在quasar.conf.js文件中添加你的启动文件
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
boot: [
|
|||
|
|
'i18n',
|
|||
|
|
'axios',
|
|||
|
|
'baiduMap'
|
|||
|
|
]
|
|||
|
|
```
|
|||
|
|
* ### 页面
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<template>
|
|||
|
|
<baidu-map
|
|||
|
|
:center="center"
|
|||
|
|
:zoom="zoom"
|
|||
|
|
@ready="handler"
|
|||
|
|
style="height: 1080px"
|
|||
|
|
@click="getClickInfo"
|
|||
|
|
:scroll-wheel-zoom="true"
|
|||
|
|
>
|
|||
|
|
</baidu-map>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: "TestBaiDu",
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
center: { lng: 109.45744048529967, lat: 36.49771311230842 },
|
|||
|
|
zoom: 13
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
handler({ BMap, map }) {
|
|||
|
|
var point = new BMap.Point(109.49926175379778, 36.60449676862417);
|
|||
|
|
map.centerAndZoom(point, 13);
|
|||
|
|
var marker = new BMap.Marker(point); // 创建标注
|
|||
|
|
map.addOverlay(marker); // 将标注添加到地图中
|
|||
|
|
var circle = new BMap.Circle(point, 6, {
|
|||
|
|
strokeColor: "Red",
|
|||
|
|
strokeWeight: 6,
|
|||
|
|
strokeOpacity: 1,
|
|||
|
|
Color: "Red",
|
|||
|
|
fillColor: "#f03",
|
|||
|
|
});
|
|||
|
|
map.addOverlay(circle);
|
|||
|
|
var opts = {
|
|||
|
|
width: 50, // 信息窗口宽度
|
|||
|
|
height: 10, // 信息窗口高度
|
|||
|
|
title: "北京", // 信息窗口标题
|
|||
|
|
};
|
|||
|
|
var infoWindow = new BMap.InfoWindow("三里屯", opts); // 创建信息窗口对象
|
|||
|
|
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
|
|||
|
|
},
|
|||
|
|
getClickInfo(e) {
|
|||
|
|
console.log(e.point.lng);
|
|||
|
|
console.log(e.point.lat);
|
|||
|
|
this.center.lng = e.point.lng;
|
|||
|
|
this.center.lat = e.point.lat;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
```
|