vue结合vue-amap调用高德地图行政区划分

1、到高德地图开放平台申请key
2、npm安装vue-amap
3、在main.js中引入并初始化

import AMap from 'vue-amap';
Vue.use(AMap);import $ from 'jquery'// 初始化vue-amap
AMap.initAMapApiLoader({// 高德keykey: 'd5486742b76ab0969e4c3ce26f46dfc6',// 插件集合 （插件按需引入）plugin: ['AMap.Geolocation','Geolocation','AMap.DistrictSearch'],v: '1.4.4'
});

4、页面引用amap（注意这个ref的属性是和后面地图的视图自适应的时候对应的）el-amap-polygon的属性可参考[el-amap-polygon属性]

  <div class="mapContainer"><div class="amap-page-container" v-bind:style="{height: heightData}"><el-amap vid="amapDemo" :center="center" :zoom="zoom" class="amap-demo" ref="map"><el-amap-polygonstrokeColor="#4ea8f8"strokeOpacity="0.8"fillColor="#c9ebf7"fillOpacity="0.5"v-for="(polygon, index) in polygons":key="index"strokeWeight="1":path="polygon.Ce.path"></el-amap-polygon></el-amap></div></div>

5、页面参数

  data() {return {heightData: "600px",zoom: 7,center: [116.244694, 39.517344],window: "",polygons: [],district: null,};},

6、具体方法

drawBounds() {var that = this;//加载行政区划插件if (!that.district) {//实例化DistrictSearchvar opts = {subdistrict: 0, //获取边界不需要返回下级行政区extensions: "all", //返回行政区边界坐标组等具体信息level: "city", //查询行政级别为 市};that.district = new AMap.DistrictSearch(opts);}//行政区查询let code = that.listDate.city + "";that.district.search(code, function (status, result) {that.polygons = [];var bounds = result.districtList[0].boundaries;if (bounds) {for (var i = 0, l = bounds.length; i < l; i++) {//生成行政区划polygonvar polygon = new AMap.Polygon({strokeWeight: 1,path: bounds[i],fillOpacity: 0.4,fillColor: "#80d8ff",strokeColor: "#0091ea",});that.polygons.push(polygon);}}console.log("polygons");console.log(that.polygons);AMap.Polygon.bind(that.polygons);that.$refs.map.$amap.setFitView(that.polygons); //视口自适应});},

  mounted: function () {setTimeout(() => {this.drawBounds();}, 200);},

注意：created调用drawBounds时如果不加setTimeout的话会出现类似如下的间歇性报错。原因是因为AMap初始化是个异步过程，在AMap还没初始化完成时就调用了它，所以就不存在了。解决办法也很简单，给使用AMap的方法加个setTimeout延后一点时间调用就可以了

选择北京市海淀区地图锁展示的效果

vue结合vue-amap调用高德地图行政区划分相关推荐

vue项目中调用高德地图vue-amap 插件的AMap.PlaceSearch简用
vue项目调用高德地图vue-amap 插件的AMap.PlaceSearch简用结合 elementui 的 el-input 直接下拉选取地点不展示地图 1.下载 npm install v ...
vue调用高德地图实现定位
vue调用高德地图实现定位第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap impor ...
JS 如何调用高德地图
最近配合后台做管理系统,需要前端用原生html页面嵌入到后台,于是乎...记录下原生JS怎么使用高德地图吧一.获取高德地图的key 获取地址:高德开放平台https://lbs.amap.com/ ...
高德地图api接口文档_在 R 语言里面调用高德地图接口：地理编码与路径规划
你知道从广州南站去珠江新城怎么走么?今天就让我们一起使用 R 语言调用高德地图的地理编码(地址转经纬度)接口和路径规划接口来回答这个问题. 准备工作注册高德地图,创建应用添加 Key(注意申请 Ke ...
第三方应用调用高德地图
http://www.eoeandroid.com/thread-540298-1-1.html 项目中要直接调用高德地图应用,而不是高德地图API. 点击直接调用高德地进行导航,肯定需要传参数的,发 ...
java获取经纬度_java调用高德地图api获取某个位置的经纬度
java调用高德地图api获取经纬度的方法,废话少说,直接上代码: import com.fasterxml.jackson.databind.JsonNode; import com.ning.ht ...
webapp通过点击调用高德地图或百度地图导航
webapp通过点击调用高德地图或百度地图导航 // 高德地图 <a :href="'https://uri.amap.com/marker?position='+经度+','+纬度+ ...
Android调用高德地图直接导航的简单实例
在学校最近做了一个小APP,脑子笨怕忘,写个博客记录一下. 简单来说就是保存地点,然后单击直接打开高德地图APP并从当前所在地导航到保存的地点.因为是小型学习用的,所以保存地点采用了Android本地 ...
调用高德地图Api实现通过地址转经纬度
调用高德地图Api实现通过地址转经纬度在高德地图开放平台注册一个key就可以了,链接在这儿高德地图开放平台 /*** @author _沉淀_* @version 1.0.0* @ClassName ...
GMap.net在winform中调用高德地图
GMap没有自带国内服务商的地图产品接口,需要在项目中创建相关的类才能调用,下面阐述下如何调用高德地图 1.在创建了UserControl(改天专门写写关于UserControl控件的使用)的前提下, ...

vue结合vue-amap调用高德地图行政区划分

vue结合vue-amap调用高德地图行政区划分相关推荐

最新文章

热门文章