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}
相关知识
百度地图
百度地图 高德地图 腾讯地图商家信息采集及导出工具
百度经验
如何看宠物旅游的地图?
百度地图引用报错A parser
好伙伴宠物训练学校卫星地图,地图高清卫星地图
地图故事组
《心灵地图
解码全国首个基于大数据和AI的城市幸福感指数框架,它的研制者是百度
百度推广
网址: 百度地图篇 https://m.mcbbbk.com/newsview391791.html
上一篇: JS === 实现回到顶部 |
下一篇: 仓鼠怀孕现象 有时鼠妈妈会为了玩 |