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

 

一、引入高德JSAPI

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//在项目根目录下的模板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

?
1
2
3
4
5
6
7
8
9
//因为是通过script标签引入的，所以要在webpack中将引入的库声明为外部扩展，否则在模块中导入时找不到。如果是vue-cli2的话，直接到build文件夹下的webpack配置文件中添加就行；如果是vue-cli3的话，自己在项目根目录下建一个vue.config.js文件，添加下面的externals配置，然后重启项目，刷新界面。
 
 
configureWebpack: config => {
        config.externals = {
            AMap: "window.CityGis",
            "GDAMap": "AMap",
        };
    },

 

 

三、初始化地图

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<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 @   公羽寒  阅读(2260)  评论(1)  编辑  收藏  举报
相关博文：
·  Mac - Xcode卸载后Git无法使用的解决
·  前端 - CSS让网页变为黑白配色
·  高德地图JS-API初始化地图配置 | vue实现
·  vue引入高德地图
·  高德地图- JS API 结合Vue使用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 字符编码：从基础到乱码解决
点击右上角即可分享
微信分享提示
AI IDE Trae