vue高德地图绘制行政区边界

<template><div id="gaodeMap"></div>
</template><script>import AMapLoader from "@amap/amap-jsapi-loader";// 设置安全密钥window._AMapSecurityConfig = {securityJsCode: '从高德申请的安全密钥',}export default {name: "index",data() {return {districtCode:'310112',district: null,polygons : [],//行政区划查询opts: {subdistrict: 0,   //获取边界不需要返回下级行政区extensions: 'all',  //返回行政区边界坐标组等具体信息level: 'district'  //查询行政级别为 区}}},mounted() {this.getMapCenter();this.initMap();},methods: {getMapCenter() {this.districtCode = this.$route.params.districtCode},/*** 初始化地图*/initMap() {AMapLoader.load({key: "从高德申请的key",version: "2.0",plugins: ['AMap.Scale', 'AMap.DistrictSearch'],}).then((AMap) => {// 初始化地图this.map = new AMap.Map('gaodeMap', {viewMode: "2D",resizeEnable: true,center: [116.30946, 39.937629],zoom: 3});this.map.addControl(new AMap.Scale())this.drawBounds();}).catch(e => {console.log(e);});},/*** 绘制区域*/drawBounds() {let that = thisthis.district = new AMap.DistrictSearch(this.opts)this.district.search(this.districtCode, function (status, result) {that.map.remove(that.polygons)//清除上次结果that.polygons = [];let bounds = result.districtList[0].boundaries;if (bounds) {for (let i = 0, l = bounds.length; i < l; i++) {//生成行政区划polygonlet polygon = new AMap.Polygon({strokeWeight: 1,path: bounds[i],fillOpacity: 0.4,fillColor: '#80d8ff',strokeColor: '#0091ea'});that.polygons.push(polygon);}}that.map.add(that.polygons)that.map.setFitView(that.polygons);//视口自适应});}}}
</script><style scoped>#gaodeMap {width: 100%;height: 100%;}</style>

vue高德地图绘制行政区边界相关推荐

H5数据可视化(高德地图绘制行政区)
1.高德地图可视化项目搭建参考我的上篇文章完成基本搭建:H5数据可视化(高德地图构建项目) 2.使用高德行政区查询该部分主要参照官方教程即可,其中使用行政区划查询服务前要先引入该插件,具体的引入方 ...
vue+高德地图绘制路径
一.vue+高德地图开发最近开发项目地图用的比较频繁,比如高德地图.百度地图或者echars地图,而且大都是用来做路径展示,所以今天说说高德地图的使用(非全面的高德地图使用) 使用的是vue cli ...
高德地图绘制省市边界，根据指标各市显示不同状态
高德api中提供了绘制边界方法,引用简单,只需传入省市名称即可,以下以江苏省示例,为演示效果数据为自定义,效果如下. ① index.html文件中引入高德地图及关键方法 <script typ ...
高德地图绘制行政边界
行政边界大都用shape文件承载,而高德地图没有直接绘制shape文件的接口,需要从shape文件中提取坐标信息,再使用高德地图的drawLine等api接口进行绘制,具体步骤如下: 1.打开ArcM ...
js/vue 高德地图绘制驾车路线图
地图容器: // css要给此容器设置宽高 <div class="map_container"></div> 画图 data{ return { Clng ...
百度地图绘制行政区边界
一般app很少看到有在百度地图上显示行政边界的,本想偷懒一回,拿个现成的,但百度好长时间都没有.还是耐心的去看类参考吧,后来发现挺简单的,所以记录一下方便以后直接拿来用了. 其实就是获取点位生成图层添 ...
vue +高德地图绘制围栏
简易版绘制围栏 <template><div class="amapContainer_con"><button type="primary ...
vue+高德地图实现多边形范围内标点
vue+高德地图实现多边形范围内标点具体实现: 一.安装并引入高德地图: 二.创建一个aMap地图文件: 三.aMap上创建多边形围栏: 四.配置围栏.地图点击事件: 五.地图点击标点事件: 本篇文 ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...

vue高德地图绘制行政区边界

vue高德地图绘制行政区边界相关推荐

最新文章

热门文章