Vue - Amap高德地图初始化使用以及行政区域聚合功能（script引入方式）

 

一、引入高德JSAPI

//在项目根目录下的模板index.html中引入下面2个JSAPI

<head>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=AMap.DistrictSearch,AMap.Scale,AMap.MarkerClusterer"></script>
<script type="text/javascript" src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <style>
        /*隐藏地图loge*/
        * {
            touch-action: pan-y;
        }

        .amap-logo {
            opacity: 0;
        }

        .amap-copyright {
            opacity: 0;
        }

        .amap-marker-label {
            border: 0;
            background-color: transparent;
            color: #9CA09D;
            font-size: large;
        }

        .info {
            position: relative;
            top: 0;
            right: 0;
            min-width: 0;
            font-size: 16px;
            transform: scale(1);

        }

        .info-top > img {
            position: absolute;
            right: 0px;
            top: 0px;
            width: 1.2rem;
            height: 1.2rem;

        }
    </style>
</head>

 

 

二、声明externals

//因为是通过script标签引入的，所以要在webpack中将引入的库声明为外部扩展，否则在模块中导入时找不到。如果是vue-cli2的话，直接到build文件夹下的webpack配置文件中添加就行；如果是vue-cli3的话，自己在项目根目录下建一个vue.config.js文件，添加下面的externals配置，然后重启项目，刷新界面。


configureWebpack: config => {
        config.externals = {
            AMap: "window.CityGis",
            "GDAMap": "AMap",
        };
    },

 

 

三、初始化地图

<template>
  <div class="map-container">
    <van-search
      v-model="value"
      show-action
      label="上海市"
      placeholder="请输入关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>

    <div class="map">
      <div id="container" style="width: 100% ;height: 100%">
    </div>
  </div>

  </div>
</template>

<script>

export default {
  name:"",
  components: {},
  props: {},
  data() {
    return {
      value: '',
    };
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
    this.$nextTick(()=>{
        this.initMap();
        this.init1("上海市");
    });
  },
  methods: {
    onSearch() {
      console.log('搜索',this.value);
    },
    // 地图的初始化
    initMap(){
        window.map = new window.AMap.Map("container", {
        zoom: 13,
        rotateEnable: true,
        pitchEnable: true,
        pitch: 0,
        defaultCursor: "Pointer",
        showBuildingBlock: false,
        buildingAnimation: true,
        expandZoomRange: true,
        zooms: [0, 20],
        resizeEnable: true,//是否监控地图容器尺寸变化
        features: ['point', 'road', 'bg'],//隐藏默认楼块
        viewMode: "3D",
      });
      window.map.setFitView();
      window.map.on('zoomchange', this.getZoom);
      this.setMapStyle('f1a19ef420e096588eff80f7b7be9dc6')
      this.setZoomCentrer(11, [121.238825, 31.353284])
      this.setAreaOilygon()//街镇区域
    },
    setMapStyle(value) {
      const myStyle = 'amap://styles/' + value
      window.map.setMapStyle(myStyle)
    },
    setZoomCentrer(num, lnglat) {
      window.map.setZoomAndCenter(num, lnglat)
    },
    setAreaOilygon(newkey = ['jiadingzhen']) {
      let area = require('@/utils/area.json')

      let areaList = []
      for (const key of Object.keys(area)) {
        areaList.push(key)
      }

      for (const key of Object.keys(area)) {
        if (key && areaList.some(item => item == key)) {
          const points = []
          for (const item of area[key]) {
            points.push([item.lng, item.lat])
          }
          let polygon = new window.AMap.Polygon({
            path: points,
            strokeWeight: 4,
            strokeColor: '#01ffff',
            fillOpacity: 0.7,
            name: 11,
            fillColor: '#02a8f5',
          })
          polygon.on('click', this.getAreaOilygon)
          window.map.add(polygon)
        }
      }
    },
    getAreaOilygon(e) {
      console.log(e);
    },

//区域遮盖(只显示部分地区遮罩其他地区)
    init1 (city) {
      var that =this
      if( that.polygon ) {
          window.map.remove(that.polygon)
      }
      AMap.plugin('AMap.DistrictSearch', function () {
          new AMap.DistrictSearch({
              extensions: 'all',
              subdistrict: 0
          }).search(city, 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)
              that.polygon = new AMap.Polygon({
                  pathL: pathArray,
                  strokeColor: '#ddd',//城市边界颜色
                  strokeWeight: 3,
                  fillColor: '#fff', // 遮罩背景色黑色
                  fillOpacity: 1
              })
              that.polygon.setPath(pathArray)
              window.map.add(that.polygon)
          })
      })
    },
  }
};
</script>

<style scoped lang="scss">
.map {
  width: 100%;
  height: 500px;
}
</style>

 

posted @ 2022-04-23 11:17  公羽寒  阅读(2357)  评论(1)    收藏  举报