功能描述:初始状态下,可以看到所有数据在地图上的分布的省份及相应的分布数量,点击点标注可以弹出对应的详细信息。
该例子使用了高德地图原生API去实现上述功能,效果图如下:
下面附上实现步骤:
1. vue使用高德地图原生API。 vue使用高德地图原生API的步骤在我的这篇博客中:https://blog.csdn.net/wsymcxy/article/details/114082139?spm=1001.2014.3001.5501
2.在步骤1的基础上在index.html中新加下面代码。
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=db6fb9089b4216691cd63dc0bd9daeb7&plugin=AMap.Geocoder,AMap.MarkerClusterer,AMap.DistrictSearch,AMap.DistrictLayer"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/data/district.js"></script>
3.根据实际业务去实现具体功能。
positions是从后台获取的数组.
loadMap() {
this.$http.defaults.headers.common['token'] = this.token;
this.$http.get(URL_CONFIG.UrlConfig.getAllGPS)
.then(res => {
if(res.data.status == "200") {