最新高德地图 以npm方式引入
最新高德地图 以npm方式引入
拿我格子衫来
发布于 2022-01-24 19:07:24
发布于 2022-01-24 19:07:24
代码可运行
运行总次数：0
代码可运行
官方推荐使用 JSAPI Loader (推荐)
JSAPI Loader是高德提供的 API 加载器，可帮助开发者快速定位、有效避免加载引用地图 JSAPI 各种错误用法，具有以下特性：
- 支持以 普通JS 和 npm包 两种方式使用；
- 有效避免错误异步加载导致的 JSAPI 资源加载不完整问题；
- 对于加载混用多个版本 JSAPI 的错误用法给予报错处理；
- 对于不合法加载引用 JSAPI 给予报错处理；
- 支持指定 JSAPI 版本；
- 支持插件加载；
- 允许多次执行加载操作，网络资源不会重复请求，便于大型工程模块管理；
- 支持
IE9以上的浏览器，不支持IE8以下
安装loader包
npm i @amap/amap-jsapi-loader --save-dev在vue组件中使用 如此
<template>
<div class="home-container">
<h4 class="text-center">AMap疑难问题的解决方案及优秀实例解析</h4>
<div class="flex-center">
<div id="mymap" style="height:500px;width:500px"></div>
</div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
name: "Home",
components: {},
data() {
return {
map: null
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
AMapLoader.load({
key: "your key", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [] //插件列表
})
.then(AMap => {
this.map = new AMap.Map("mymap");
})
.catch(e => {
console.log(e);
});
}
}
};
</script>
<style lang="scss"></style>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
