uniapp如何使用高德地图

下面用的高德地图v2版本，使用的【Key】【安全密钥】仅用于学习与测试（使用次数有限制），公司或个人的项目请到高德控制台中心申请。

amap.vue组件

效果图：

uniapp百度echarts图表使用：

https://www.jianshu.com/p/409e5453fd38

高德地图控制台中心

https://console.amap.com/dev/key/app

高德地图API文档

https://lbs.amap.com/api/jsapi-v2/summary/

近期根据全新的需求重构一个老的项目，首页需要做一个立体的中国地图，原先的平面地图使用的是高德与echarts结合，地图用高德，点用echarts，而现在要做立体的地图，并且不需要世界地图的背景，于是我直接放弃了高德直接改全部由echarts来实现。

echarts 5.1.2

vue-echarts 6.0.0

lodash

element-ui

采用高德的地图json

https://datav.aliyun.com/tools/atlas/index.html

我绘制的立体地图的原理只是在页面上显示了两层的地图，简单来说就是底层使用暗色并且将中心点稍微下移，echarts的option配置如下

注意点：

通过监听 georoam 事件来实现，需要特别注意的是，缩放与拖动需要调用 echartsInstance.getOption() 来获取完整的option值并做出修改后覆盖原有的option，否则会出现bug。

单击事件有时会无法生效故改成了双击下钻(估计可能和拖拽有冲突)

说明：

1.code，centroid，level是数据组装的时候放入data中的，前两者直接从地图文件中取到，level的值只有'country'和'province'代表全国和省份。

至此一个完整的立体地图就实现了。

参考内容

https://www.makeapie.com/editor.html?c=xPRYVyWjUJ

---