vue.js正确使用百度地图的方案 vue百度地图自定义控件

方案一：
1.在index.html，加入

2.在vue.config.js，配置

configureWebpack: config => {
config.externals = { 'BMap': 'BMap' }
}

3.在Address.vue页面

import BMap from 'BMap'
export default {
methods: {
initMap () {
var map = new BMap.Map('container')
//创建地址解析器实例
var myGeo = new BMap.Geocoder()
// 将地址解析结果显示在地图上，并调整地图视野
myGeo.getPoint('广州天河体育中心', (point) => {
if (point) {
map.centerAndZoom(point, 15)
var marker = new BMap.Marker(point) // 创建标注
map.addOverlay(marker) // 将标注添加到地图中
var opts = {
width: 200, // 信息窗口宽度
height: 60, // 信息窗口高度
title: '办公地址：', // 信息窗口标题
message:‘广州天河体育中心’
}
var infoWindow = new BMap.InfoWindow(‘广州天河体育中心’, opts) // 创建信息窗口对象
marker.addEventListener('click', function () {
map.openInfoWindow(infoWindow, point) //开启信息窗口
})
marker.dispatchEvent('click')
}
})
}
},
}
},
mounted () {
this.initMap()
}

过程如果遇到百度地图的js报错，如下：
Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’
请检查输入的地址的值是否存在，而不是 的dom相关的问题。