高德地图JS_api小总结

一个练手项目的总结,其中感觉最有趣的就是高德地图的文档了(简直不要太友好了~)

最基础的调用

高德地图JS_API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
...
<body>
<!--创建容器 -->
<div id="container"></div>
<!--引入高德地图JSAPI -->
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=您申请的key值"></script>
<!--引入UI组件库(1.0版本) -->
<script src="http://webapi.amap.com/ui/1.0/main.js"></script>
<!-- 基础调用 -->
<script>
var map = new AMap.Map('container',{
resizeEnable: true,
zoom: 10,
center: [116.480983, 40.0958]
});
</script>
</body>
...

Vue 调用

心酸过程

推荐一下 由 饿了么 出品的 vue-amap 高德地图组件,整体来说还是比较不错的,但是遇到几处 bug 超出了本人的知识范围,只好放弃。

最后 看到了 在Vue中完美的使用高德地图 这篇文章

调用过程(蛮好玩的)

这里引用了一个方法 remoteLoad() 蛮好用的脚本加载方法;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

async created() {
if (window.AMap && window.AMapUI) {
this.initMap()
} else {
await remoteLoad('http://webapi.amap.com/maps?v=1.4.5&key={key}')
await remoteLoad('http://webapi.amap.com/ui/1.0/main.js')
this.initMap()
}
},
methods: {
initMap(){
// 初始化 AMap
this.map = new AMap.Map('layMap', {
resizeEnable: true,
center: [116.30946, 39.937629],
zoom: 3
});
/*
使用插件就根据 高德 Api 创建
例如: DistrictSearch
*/
AMap.service('AMap.DistrictSearch', () => {
//实例化DistrictSearch
this.district = new AMap.DistrictSearch({
extensions: 'all',
subdistrict: 1,
showbiz: true
})
})
}
}

插件的两种调用办法

直接初始化

无论是纯页面,还是 vue 异步加载均可以直接在链接后面加上plugin 参数并赋予值;

这种办法适用于在一个组件内多次调用了垓插件,又不想多次初始化的情况;

1
http://webapi.amap.com/maps?v=1.4.4&key=您申请的key值&plugin=AMap.DistrictSearch

根据需要调用

部分插件在使用之前,需要使用 AMap.service 方法加载插件,然后在回调函数中可以进行服务的设定和查询:

1
2
3
4
5
6
7
8
AMap.service('AMap.DistrictSearch', function() {
//实例化DistrictSearch
this.district = new AMap.DistrictSearch({
extensions: 'all',
subdistrict: 1,
showbiz: true
})
})

小结

练手项目 - demo

可能会顿卡,刷新应该就好了

感谢阅读