vue异步加载amap高德地图,解决刷新浏览器地图不显示问题hcg012的博客-

创建amap.js

/*  * 异步创建script标签  */ export default function MapLoader () { return new Promise((resolve, reject) => { if (window.AMap) { resolve(window.AMap) } else { var url = 'https://webapi.amap.com/maps?v=1.4.15&key=2e91f494321a102c9f969df860b447dc&callback=onLoad' var script = document.createElement('script')       script.charset = 'utf-8'       script.src = url       script.onerror = reject       document.head.appendChild(script) }     window.onLoad = () => { resolve(window.AMap) } }) } 

在页面中引用

<template> <Row id="amap" style="width: 100%; height: 100%; margin-top: -40px;"></Row> </template> <script> import MapLoader from '@/libs/amap' let AMap  ...... ...... ...... methods: { createAmap () {       map = new AMap.Map('amap', {         resizeEnable: true,         zoom: 10, // 设置地图显示的缩放级别         center: this.center, // 设置地图中心点坐标         viewMode: '2D', // 设置地图模式 // 地图模式         lang: 'zh_cn' // 设置地图语言类型 }) let scale = new AMap.Scale({ // 比例尺         visible: true }) let toolBar = new AMap.ToolBar({ // 工具条         visible: true })       map.addControl(scale)       map.addControl(toolBar) // 浏览器精确定位       AMap.plugin('AMap.Geolocation', function () { var geolocation = new AMap.Geolocation({           enableHighAccuracy: true, // 是否使用高精度定位，默认:true           timeout: 10000, // 超过10秒后停止定位，默认：无穷大           maximumAge: 0, // 定位结果缓存0毫秒，默认：0           convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true           showButton: true, // 显示定位按钮，默认：true           buttonPosition: 'RB', // 定位按钮停靠位置，默认：'LB'，左下角           buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)           showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true           showCircle: false, // 定位成功后用圆圈表示定位精度范围，默认：true           panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true           zoomToAccuracy: false // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false })         map.addControl(geolocation)         geolocation.getCurrentPosition(function (status, result) { let position = result.position           if (status === 'complete') {             console.log('定位成功：定位结果 = %o', [position.lng, position.lat]) } else {             console.log('定位失败') } }) }) } } mounted () { // 初始化地图对象，加载地图 MapLoader().then(aMap => {       console.log('%地图异步加载成功%')       AMap = aMap       setTimeout(() => { this.request() this.createAmap() }, 500) }) } </script>