Vue中使用VueAMap

npm 安装

npm install vue-amap --save
1

注册:高德地图

// 在main.js中注册:高德地图
import VueAMap from "vue-amap";
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: "你的高德key",
  plugin: [
    "AMap.AutoComplete", //输入提示插件
    "AMap.PlaceSearch", //POI搜索插件
    "AMap.Scale", //右下角缩略图插件 比例尺
    "AMap.OverView", //地图鹰眼插件
    "AMap.ToolBar", //地图工具条
    "AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    "AMap.PolyEditor", //编辑 折线多，边形
    "AMap.PolygonEditor", //编辑 折线多，边形
    "AMap.CircleEditor", //圆形编辑器插件
    "AMap.Geolocation", //定位控件，用来获取和展示用户主机所在的经纬度位置
  ],
  // 默认高德 sdk 版本为 1.4.4
  v: "2.0",
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

配置安全密钥

// 在public/index.html中配置
  <script type="text/javascript">
    // 使用高德，需要配置安全密钥
    window._AMapSecurityConfig = {
      securityJsCode: "xxx",
    };
  </script>
1
2
3
4
5
6
7

VueAMap使用

效果图

// 核心代码
<template>
  <div class="app-container">
    <div class="main">
      <!-- 地图 -->
      <div id="container" style="width: 100%; height: 500px" />
      <!-- 搜索 -->
      <div class="info">
        <div class="input-item">
          <div class="input-item-prepend">
            <span class="input-item-text" style="width: 8rem"
              >请输入关键字</span
            >
          </div>
          <input id="tipinput" type="text" style="margin-right: 5px" />
          <el-button type="primary" @click="onSearch" size="mini"
            >搜索</el-button
          >
        </div>
      </div>
      <!-- 控制按钮组 -->
      <section class="section">
        <div class="ebox">
          <el-button-group>
            <el-button
              type="info"
              icon="el-icon-circle-plus-outline"
              @click="drawRectangle"
              :disabled="path.length > 0"
              >绘制围栏</el-button
            >
            <el-button type="primary" icon="el-icon-edit" @click="editRectangle"
              >编辑围栏</el-button
            >
            <el-button
              type="success"
              icon="el-icon-success"
              @click="saveRectangle"
              >保存围栏</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="deleRectangle"
              >删除围栏</el-button
            >
          </el-button-group>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  name: "Society",
  data() {
    return {
      map: null, // 地图组件
      center: [114.0579, 22.5431], //地图中心位置，不能为空数组【为空数组会报错】
      path: [], //绘制的数据
      polyEditor: null, // polyEditor组件
    };
  },
  created() {},
  mounted() {
    setTimeout(() => {
      //异步加载（否则报错initMap is not defined）
      this.initMap();
    }, 1000);
  },
  methods: {
    // 地图初始化
    initMap() {
      this.map = new AMap.Map("container", {
        resizeEnable: true, // 窗口大小调整
        center: this.center, // 中心
        zoom: 15, //放大级别
        showLabel: true, // 是否显示地图文字标记
      });
      // 添加工具栏
      this.map.plugin(
        [
          "AMap.ToolBar",
          "AMap.AutoComplete",
          "AMap.PlaceSearch",
          "AMap.Geolocation",
        ],
        () => {
          const toolbar = new AMap.ToolBar(); // 工具条
          this.map.addControl(toolbar);
          // 实例化Autocomplete 搜索
          const autoOptions = {
            //city 限定城市，默认全国
            city: "全国",
            input: "tipinput",
          };
          const AutoComplete = new AMap.AutoComplete(autoOptions);
          this.AutoComplete = AutoComplete;
          // AutoComplete.search(keyword, (status, result) => {
          //   console.log(status, result);
          //   // 搜索成功时，result即是对应的匹配数据
          // });

          // 获取定位工具
          const geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, //是否使用高精度定位，默认:true
            timeout: 10000, //超过10秒后停止定位，默认：无穷大
            maximumAge: 0, //定位结果缓存0毫秒，默认：0
            convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true, //显示定位按钮，默认：true
            position: "LB", //定位按钮停靠位置，默认：'LB'，左下角
            buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          });
          this.map.addControl(geolocation);
          geolocation.getCurrentPosition((status, result) => {
            if (status == "complete") {
              this.$modal.msgSuccess("获取定位成功");
              this.center = [result.position.lng, result.position.lat];
            } else {
              this.$modal.msgWarning("获取定位失败");
            }
          });
          // 获取后端返回的数据,创建围栏
          if (this.path && this.path.length > 0) {
            const polygon = new AMap.Polygon({
              path: this.path,
            });
            // 创建围栏实例
            this.polyEditor = new AMap.PolyEditor(this.map, polygon);
            // 清空地图
            this.map.clearMap();
            // 地图添加围栏
            this.map.add(polygon);
            // 聚焦当前围栏
            this.map.setFitView(this.polyEditor.getTarget());
          }
        }
      );
    },
    // 绘制多边形
    drawRectangle() {
      const This = this;
      // 创建并开启围栏编辑器
      const polyEditor = new AMap.PolygonEditor(this.map);
      this.polyEditor = polyEditor;
      polyEditor.close();
      polyEditor.setTarget();
      polyEditor.open();
      // 创建一个覆盖物之后触发该事件，target即为创建对象。
      // 当editor编辑对象为空时，调用open接口，再点击一次屏幕就会创建新的覆盖物对象
      polyEditor.on("add", (data) => {
        const polygon = data.target;
        // 添加吸附多边形围栏
        polyEditor.addAdsorbPolygons(polygon);
        This.map.setFitView([polygon]);
        // 围栏双击事件，编辑完后聚焦当前围栏
        polygon.on("dblclick", () => {
          polyEditor.setTarget(polygon);
          This.map.setFitView([polygon]);
          polyEditor.open();
        });
      });
    },
    // 编辑围栏
    editRectangle() {
      // 聚焦当前围栏,打开编辑
      this.map.setFitView(this.polyEditor.getTarget());
      this.polyEditor.open();
    },
    //保存围栏
    saveRectangle() {
      this.path = [];
      // 获取当前最新的坐标，并取消编辑状态
      this.polyEditor
        .getTarget()
        .getPath()
        .forEach((v) => {
          this.path.push([v.lng, v.lat]);
        });
      this.polyEditor.close();
    },
    // 删除围栏
    deleRectangle() {
      this.path = [];
      this.map.clearMap(); // 删除地图所有覆盖物
    },
    // 搜索
    onSearch() {
      const vm = this;
      const keyword = document.getElementById("tipinput").value;
      // 实例化PlaceSearch
      const place = {
        map: vm.map,
        extensions: "all",
        autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
      };
      const PlaceSearch = new AMap.PlaceSearch(place);
      PlaceSearch.search(keyword, (status, result) => {
        // 搜索成功时，result即是对应的匹配数据
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");
</style>
<style lang="scss"scoped>
.amap-box {
  width: 100%;
  height: 600px;
}
.section {
  position: relative;
}

.info {
  position: absolute;
  right: 0px;
  top: 0px;
}
</style>

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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228

如果在弹窗中使用VueAMap,需要全局引用改样式

// AMap.Autocomplete会被elment ui弹窗遮挡问题
.amap-sug-result {
  z-index: 99999 !important;
}
1
2
3
4