代码拉取完成,页面将自动刷新
amap-jsapi-loader 是高德开放平台官网提供的地图 JSAPI 的加载器,可帮助开发者快速定位、有效避免加载引用地图 JSAPI 各种错误用法。
从官方库移植,主要解决ssr环境下加载报错以及调整index.d.ts
该加载器具有以下特性:
AMapLoader.load({
"key": "", // 申请好的Web端开发者Key,首次调用 load 时必填
"version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
"plugins": [] // 需要使用的的插件列表,如比例尺'AMap.Scale'等
"AMapUI": { // 是否加载 AMapUI,缺省不加载
"version": '1.1', // AMapUI 缺省 1.1
"plugins":[], // 需要加载的 AMapUI ui插件
},
"Loca":{ // 是否加载 Loca, 缺省不加载
"version": '1.3.2' // Loca 版本,缺省 1.3.2
},
}).then(()=>{
window.AMap.xx;
window.AMapUI.xx;
window.Loca.xx
});
AMapUI 用法和官网有一点点区别。通过 AMapUI.xx 来获取组件
AMapLoader.load({
key: '',//首次load必填
version: '2.0',
AMapUI: {
version: '1.1',
plugins: ['overlay/SimpleMarker'],
}
}).then((AMap) => {
map = new AMap.Map('container');
// !!! 通过 AMap.SimpleMarker 获取组件
new AMapUI.SimpleMarker({
//前景文字
iconLabel: 'A',
//图标主题
iconTheme: 'default',
//背景图标样式
iconStyle: 'red',
map: map,
position: map.getCenter()
});
}).catch((e) => {
console.error(e);
});
尚未发布在线Loader,可将 dist/index.js 复制到项目下
<script src="../dist/index.js"></script>
<script>
AMapLoader.load({
key:'',//首次load必填
version:'2.0',
plugins:['AMap.Scale']
}).then((AMap)=>{
map = new AMap.Map('container');
map.addControl(new AMap.Scale())
}).catch((e)=>{
console.error(e);
});
</script>
安装
tnpm i @vuemap/amap-jsapi-loader --save-dev
使用
import AMapLoader from '@vuemap/amap-jsapi-loader';
AMapLoader.load().then((AMap)=>{
map = new AMap.Map('container');
}).catch(e=>{
console.log(e);
})
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。