nuxt添加百度地图_木心操作的博客-爱代码爱编程
百度地图开发平台：地图JS API示例 | 百度地图开放平台
一、nuxt.config.js引入api接口
script: [
{
src: "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=申请的密钥",
type: "text/javascript"
},
],二、页面使用
mounted() {
// 创建地图实例
var map = new BMapGL.Map('container')
var point = new BMapGL.Point(125.552503, 29.117022)
// 设置地图中心点
map.setCenter(point)
// 设置级别
map.setZoom(50)
map.centerAndZoom(point, 15)
map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
// 创建点标记
var marker = new BMapGL.Marker(point)
// 在地图上添加点标记
map.addOverlay(marker)
// 创建信息窗口
var opts = {
width: 400,
height: 100,
offset: new BMapGL.Size(15, -10) // 设置标注的偏移量
}
var infoWindow = new BMapGL.InfoWindow(
'<p style="font-size:14px;font-weight:bold;color:#D07852">故宫博物院</p><p style="font-size:13px;margin: 5px 0;">地址：北京xxxx</p><p style="font-size:13px;margin: 5px 0;">电话： +86 2230388</p>',
opts
)
map.openInfoWindow(infoWindow, point) // 开启信息窗口
// 点标记添加点击事件
marker.addEventListener('click', function () {
map.openInfoWindow(infoWindow, point) // 开启信息窗口
})
},