vue项目中,高德地图使用。
引入vue中。异步导入vue中。
gaoDe(key) { window.onApiLoaded = function () { var map = new AMap.Map('container', { resizeEnable: true, center: [113.951955, 22.530825], zoom: 16 }); } var url = `https://webapi.amap.com/maps? v=1.4.15&key=${key}&callback=onApiLoaded`; var jsapi = document.createElement('script'); jsapi.charset = 'utf-8'; jsapi.src = url; document.head.appendChild(jsapi); mounted() { this.gaoDe('key'); },
在vue组件中使用,直接写在mouted中会出现AMap未定义的报错!
目前,个人是使用定时器解决的。
// 地图接口API mapCom() { let _this = this; window.onLoad = function () { var map = new AMap.Map('mapBox', { resizeEnable: true, center: [113.951955, 22.530825], zoom: 16 }); // console.log( _this.mapArray); // 渲染坐标 // console.log(_this.status==false) setTimeout(() => { if (_this.status == false) { return; } // console.log(_this.mapArray); _this.mapArray.forEach(item => { // console.log(item) var marker = new AMap.Marker({ map: map, icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", position: item, offset: new AMap.Pixel(-10, -30) }); }) }, 1000) // console.log(_this.mapArray); map.plugin(["AMap.ToolBar"], function () { map.addControl(new AMap.ToolBar()); }); } var url = `https://webapi.amap.com/maps?v=1.4.15&key=91d89e79a544b9ab37aa0147aec9bd0a&callback=onLoad`; var jsapi = document.createElement('script'); jsapi.charset = 'utf-8'; jsapi.src = url; document.head.appendChild(jsapi); },