高德地图JS_api小总结
一个练手项目的总结，其中感觉最有趣的就是高德地图的文档了（简直不要太友好了~）
最基础的调用
...
<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() 蛮好用的脚本加载方法；
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 参数并赋予值；
这种办法适用于在一个组件内多次调用了垓插件，又不想多次初始化的情况；
http://webapi.amap.com/maps?v=1.4.4&key=您申请的key值&plugin=AMap.DistrictSearch根据需要调用
部分插件在使用之前，需要使用 AMap.service 方法加载插件，然后在回调函数中可以进行服务的设定和查询：
AMap.service('AMap.DistrictSearch', function() {
//实例化DistrictSearch
this.district = new AMap.DistrictSearch({
extensions: 'all',
subdistrict: 1,
showbiz: true
})
})小结
练手项目 - demo
可能会顿卡，刷新应该就好了
感谢阅读