首页 > 分享 > 百度地图篇

百度地图篇

萌宠菠菠乐园
2024-10-16 06:53

1.拾取坐标系统：http://api.map.baidu.com/lbsapi/getpoint/index.html
2.百度地图开放平台：https://lbsyun.baidu.com/jsdemo.htm

vue中如何使用百度地图
1.下载百度地图包 vue-baidu-map
npm i vue-baidu-map --save

2.在对应网页的main.js中引用百度地图
import BaiduMap from ‘vue-baidu-map’
Vue.use(BaiduMap, {
ak: 你的密钥’
})

3.在页面中使用
<baidu-map
@ready=“handler”
:scroll-wheel-zoom=‘true’
style=“width:95%;height:95%;margin:10px auto 0;”
>

export default {
name: ‘home-map-index’,
data() {
return {
}
},
methods: {
handler({ BMap, map }) {

var point = new BMap.Point(116.319769, 39.976546) map.centerAndZoom(point, 18) // 如有多个point去展示，可根据后端接口传入为主 let data = [ { x: 116.314473, y: 39.977798, name: 'A楼 15个', detail: 'A验,B,C,D,E,F,E,F' }, data.forEach((e, i) => { // 创建point, 将x,y值传入 let pointNumber = new BMap.Point(e.x, e.y) // 创建信息窗口对象 let infoWindow = new BMap.InfoWindow(e.detail, { // 信息窗口宽度 width: 150, // 信息窗口高度 height: 100, // 信息窗口标题 title: '实验室名称：' }) // 将data中的name加入地图中 var label = new BMap.Label(e.name, { offset: new BMap.Size(-25, -15) }) label.setStyle({ color: '#f42a47', borderColor: '#ccc', borderRadius: '3px', height: '16px', lineHeight: '16px', padding: '2px' }) markerFun(pointNumber, infoWindow, label) }) function markerFun(points, infoWindows, label) { let markers = new BMap.Marker(points) // 将标注添加到地图中 map.addOverlay(markers) // 将data中的name添加到地图中 markers.setLabel(label) // 标注的点击事件 markers.addEventListener('click', function (event) { // 参数：窗口、点根据点击的点出现对应的窗口 map.openInfoWindow(infoWindows, points) }) } } }

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647

}
在这里插入图片描述