vue中使用高德地图自定义行政区划聚合

先看实现效果(上传图片说是违规，我也不知道为啥，所以就把图片删了)：

找了很多，都直接是官方的数据，反复查看官方文档，终于完美解决。如果能够帮到你，欢迎大家点赞收藏加关注，多多交流，互相学习，共同进步！！！！

直接上代码：

<template><div id="map_index"></div>
</template>
<script>
export default {name:"ditu",data(){return{amap:null,zoom:4,pointData:[],}},methods: {getAMap(){let map = new AMap.Map('map_index', {resizeEnable: true,zoom: this.zoom,center: [104.676809,37.290981],});this.amap = mapthis.loadDistrictCluster();},loadDistrictCluster(){let cur = thisAMapUI.load(['ui/geo/DistrictCluster', 'lib/$'], function(DistrictCluster) {//启动页面cur.initPage(DistrictCluster,$);});},initPage(DistrictCluster,$){let distCluster = new DistrictCluster({map: this.amap,zIndex:11,autoSetFitView:false,boundsQuerySupport:true,//范围查询getPosition: function(item) {return item.position;}});distCluster.setData(this.pointData);},getRangePoints() {//数据获取let data1 = [];carLnglat().then(res=>{if(res.code === 200){res.data.forEach(element => {let lnglat = element.split(",");data1.push({position: [parseFloat(lnglat[0]),parseFloat(lnglat[1])]})})}})this.pointData = data1}},mounted(){this.getRangePoints();this.getAMap();}
}
</script><style scoped>#map_index{width: 100%;height: 100%;}
</style>

vue中使用高德地图自定义行政区划聚合相关推荐

vue框架中使用高德地图自定义icon问题
** vue框架中使用高德地图自定义icon问题 ** vue框架中使用高德地图自定义icon,在编译时,因为图片会有封装问题等,但是在高德地图中没有转化对应的路径,在最后结果中会出现找不到图标的问题 ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
在vue中使用高德地图的下属省市区查询，实现省市区的联动以及规划范围
在vue中使用高德地图的下属省市区查询,实现省市区的联动以及规划范围一.先上效果图二.高德地图Vue引用一.先上效果图二.高德地图Vue引用 1. webpack引入高德在webpack.b ...
vue中引入高德地图Loca数据可视化
目录引言: 关键词: 正文: 一.如何安装或者引入: 二.如何引入: 三.如何使用: 四.完整代码: 五.效果图参考: 引言: 前面我的文章介绍了vue中引入高德地图实例的,详情可以去参考,由于需 ...
vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
Vue中使用高德地图，简单明了
一.使用步骤 1.在vue中引入高德地图的加载器 npm i @amap/amap-jsapi-loader --save 在自己的组件中去引用 <template>//这个div就是 ...
Vue中使用高德地图（vue-amap）的采坑记录小白入门
这里写目录标题写在开始 step.1 安装组件 step.2 引入组件 step.3注册高德高德开发者账号,申请KEY step.4 正式使用写在开始俗话说授人以鱼不如授人以渔,直接记录代码的话 ...
Vue中集成高德地图API实现定位与自定义样式信息窗体
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...

vue中使用高德地图自定义行政区划聚合

vue中使用高德地图自定义行政区划聚合相关推荐

最新文章

热门文章