vue cli3 构建的项目中使用高德地图

he_xd 发布于2019-08-23 16:26 / 1463人阅读

摘要：高德文档梳理首先，我们要加载外部，在外部加载完毕，然后初始化地图。加载外部你的初始化地图初始化地图的前提是，成功加载外部，然后使用高德提供的对象来构造实例。

高德文档

https://lbs.amap.com/api/java...

梳理

首先，我们要加载外部js，在外部js加载完毕，然后初始化地图。

加载外部js

let aMapScript = document.createElement("script")
aMapScript.setAttribute("src", "https://webapi.amap.com/maps?v=1.4.11&key=你的key&plugin=AMap.CitySearch")
document.head.appendChild(aMapScript)

初始化地图

初始化地图的前提是，成功加载外部js，然后使用高德提供的 AMap 对象来构造实例。
判断外部是否加载完毕，aMapScript 对象上有个onload方法，写法如下：

let self = this
let aMapScript = 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 = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 10,
    });
}

后边的话，基本上在这个回调里边操作就可以了。当然，我们通过this，把构造的地图实例暴露到外部，这样，外部直接修改这个实例。

注意：onload 内部，this指向并不是当前vue 组件，所以需要一个变量传递一下

vue中引入其他第三方在线库，基本上是同理的。

GPU云服务器云服务器 vue 中使用 webrtc vue中使用webrtc 高德地图高德地图大数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103034.html

关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
Vue.js 中使用高德地图定位及渲染地图

摘要：看了上面有集成的高德地图组件，但由于项目所要用到的不多，所以决定跟着文档写一写运行环境是引入高德地图一般用使用最简单粗暴的引入地图的方法就是，在入口的头部直接引入，记得一定要带上如果没有的话去高德地图的官网申请一个。看了github上面有集成的高德地图组件，但由于项目所要用到的不多，所以决定跟着文档写一写.运行环境是vue-cli webpack 引入高德地图一般用使用vue-cl...

Ku_Andrew 2019-08-21 17:58 评论0 收藏0
vue异步加载高德地图

摘要：异步加载异步加载指的是为指定加载的回调函数，在的主体资源加载完毕之后，将自动调用该回调函数。几种加载js的方式同步加载异步加载延迟加载同步加载用的最多的一种方式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。...

zacklee 2019-08-22 18:08 评论0 收藏0