vue中使用百度地图常用方式:script引入+vue-baidu-map

script引入

适用于每次都是重新刷新页面的情况下，例如a标签直接跳转到某个html下,不适用于vue-router路由的跳转

export function map() {
   
  return new Promise(function(resolve, reject) {
   
    // vue-router跳转不刷新页面，onload事件不会被触发
    window.onload = function() {
   
      // eslint-disable-next-line
      resolve(BMapGL)
    }
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.src =
      'https://api.map.baidu.com/api?v=1.0&type=webgl&ak=yourak&callback=initialize'
    script.onerror = reject
    document.head.appendChild(script)
  })
}

使用插件vue-baidu-map

vue-baidu-map百度文档

简单示例如下：

npm i --save vue-baidu-map
//示例代码
<baidu-map
	style="height:252px;"
	:scroll-wheel-zoom="true"
	:center="location"
	:zoom="16"
	@ready="handler"
	ak="yourak"
></baidu-map>
//页面引入方式
import BaiduMap from 'vue-baidu-map/components/map/Map.v