当前位置: 首页 > 后端技术 > Node.js

vuecli3搭建的项目使用高德地图

时间:2023-04-03 15:06:45 Node.js

高德文档https://lbs.amap.com/api/java...首先我们需要加载外部js,加载外部js后,然后初始化地图。加载外部jsletaMapScript=document.createElement('script')aMapScript.setAttribute('src','https://webapi.amap.com/maps?v=1.4.11&key=yourkey&plugin=AMap.CitySearch')document。head.appendChild(aMapScript)初始化地图初始化地图的前提是成功加载外部js,然后使用高德提供的AMap对象构造实例。判断外部加载是否完成,aMapScript对象上有个onload方法,写法如下:letself=thisletaMapScript=document.createElement('script')aMapScript.setAttribute('src','https://webapi.amap.com/maps?v=1.4.11&key=22bcbed32d531383dd420e8f0a6f2325&plugin=AMap.CitySearch')document.head.appendChild(aMapScript)aMapScript.onload=function(){self.storeMap=newAMap.Map('container',{resizeEnable:true,z:10,});}之后就基本可以在这个回调里面操作了。当然我们通过this将构造好的map实例暴露给外部,让外部直接修改这个实例。注意:在onload里面,这个点不是当前vue组件,所以需要传递一个变量来引入vue中的其他第三方在线库,基本是一样的。