- 基础
- 基础
- 遮盖物
- 窗体
- 扩展
- 插件
- 自定义组件
- 示例中心
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
1.2.3 脚本初始化
引入地图
一般项目中,对于 vue-amap 的初始化只需要调用 initAMapApiLoader
方法即可。
NPM 安装:
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: 'YOUR_KEY',
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...],
v: '1.4.4'
});
CDN 引入:
window.VueAMap.initAMapApiLoader({
key: 'YOUR_KEY',
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...],
v: '1.4.4'
});
Promise
在定制化程度较高的项目中,开发者可能只想通过 vue-amap 引入高德地图,而部分实例化的操作直接基于高德地图的 sdk 完成。这个时候就需要 lazyAMapApiLoaderInstance
。
NPM 安装:
import VueAMap from 'vue-amap';
import { lazyAMapApiLoaderInstance } from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: 'YOUR_KEY',
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...],
uiVersion: '1.0' // ui库版本,不配置不加载,
v: '1.4.4'
});
lazyAMapApiLoaderInstance.load().then(() => {
// your code ...
this.map = new AMap.Map('amapContainer', {
center: new AMap.LngLat(121.59996, 31.197646)
});
});
CDN 引入:
window.VueAMap.initAMapApiLoader({
key: 'YOUR_KEY',
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...],
v: '1.4.4'
});
window.VueAMap.lazyAMapApiLoaderInstance.load().then(() => {
// your code ...
this.map = new AMap.Map('amapContainer', {
center: new AMap.LngLat(121.59996, 31.197646)
});
});
参数
参数名 | 类型 | 默认值 | 描述 | |
---|---|---|---|---|
key | String | `` | 高德 Key | |
plugin | Array | ['Autocomplete', 'PlaceSearch', 'PolyEditor', 'CircleEditor'] | 插件 | |
uiVersion | String | `` | UI库 版本 | |
v | String | 1.4.4 | SDK 版本 | |
protocol | String | https | 引用协议 |
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论