vue中基于高德地图,获取省级地图(以安徽为例)

效果图展示
vue中基于高德地图,获取省级地图(以安徽为例)_第1张图片


vue中基于高德地图,获取省级地图(以安徽为例)_第2张图片
import AMap from ‘AMap’

 mounted() {
      var that = this
      that.initMap()
  },
 methods: {
      // 初始化地图
      initMap() {
        var that = this
        const mapConfig = {
          zoom: 10 ,// 地图显示的缩放级别
          mapStyle: 'amap://styles/darkblue', //地图背景样式
          showIndoorMap: false
        }
        // maps是容器的id名
        that.map = new AMap.Map('mapId', mapConfig)
        that.map.setMapStyle('amap://styles/db630f877ac1565889e6ec8576250978') // 自定义地图样式,不显示村庄和乡镇
        AMap.plugin('AMap.DistrictSearch', function () {
          var districtSearch = new AMap.DistrictSearch({
            extensions: 'all',
            subdistrict: 0
          })
          // 搜索所有省/直辖市信息  --下边的安徽省,可根据需要换成其他省、市或区县的地名
          districtSearch.search('安徽省', function(status, result) {
            // 外多边形坐标数组和内多边形坐标数组
            var outer = [
              new AMap.LngLat(-360, 90, true),
              new AMap.LngLat(-360, -90, true),
              new AMap.LngLat(360, -90, true),
              new AMap.LngLat(360, 90, true)
            ]
            var holes = result.districtList[0].boundaries

            var pathArray = [outer]
            pathArray.push.apply(pathArray, holes)
            var polygon = new AMap.Polygon({
              pathL: pathArray,
              // strokeColor: '#f00',
              strokeWeight: 1,
              fillColor: '#000001',
              fillOpacity: 1
            })
            polygon.setPath(pathArray)
            that.map.add(polygon)
          })
        })

      }
    }



你可能感兴趣的:(高德地图api,前端-vue,vue.js,javascript,前端)