vue AMap 高德地图

【1】、高德 API 示例； -------- 【2】、高德 API 文档； -------- 【3】、amap 官方文档；

import Vue from "vue";

// 高德离线地图
import VueAMap from "vue-amap";
Vue.use(VueAMap);

// 初始化vue-amap
VueAMap.initAMapApiLoader({
  key: "", // 这里写你申请的高德地图的key，选择 Web端（JSAPI）
  plugin: [
  'AMap.DistrictSearch',
  'AMap.Autocomplete', // 输入提示插件
  'AMap.PlaceSearch', // POI搜索插件
  'AMap.Scale', // 右下角缩略图插件 比例尺
  'AMap.OverView', // 地图鹰眼插件
  'AMap.ToolBar', // 地图工具条
  'AMap.MapType', // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
  'AMap.PolyEditor', // 编辑 折线多，边形
  'AMap.CircleEditor', // 圆形编辑器插件
  'AMap.Geolocation', // 定位控件，用来获取和展示用户主机所在的经纬度位置
  'AMap.Geocoder'
],
  v: "1.4.15"
});

// 高德的安全密钥，https://lbs.amap.com/api/jsapi-v2/guide/abc/load
<script setup>
import AMapLoader from 'vue-amap';
window._AMapSecurityConfig = {
  securityJsCode: '你申请的安全密钥',
};
</script>


// https://blog.csdn.net/qq_44410862/article/details/124023672
// https://blog.csdn.net/m0_37755267/article/details/119796458
// https://www.jb51.net/article/251566.htm
// https://juejin.cn/post/6844903895341236238
// https://juejin.cn/post/7059262467209166861  注释

添加标记：

1、marker.setMap(map);
2、map.add([marker]);

删除标记：

1.marker.setMap(null);
2 map.remove([marker1,marker2]);（前提是map用add添加的标记）

清除地图上所有图层： 介绍 —>

this.map.clearLayers();

// .eslintrc.js
"globals": {
   "AMap": "true",
},


map.add(marker);
map.setFitView(); // 加载
map.setZoom(17); // 设置zoom级别

/** https://juejin.cn/post/7090022862114783245  工具
 对form表单中带有prop属性，给设置 v-if 的元素加上key值 <el-form-item label="活动名称" prop="title" key="title">
 
 email.substr(0, 3) + '****' + userInfo.email.substr(7)  邮箱
 phone.replace(/(\d{3})\d*(\d{4})/, '$1****$2')  手机

 https://blog.csdn.net/weixin_44510476/article/details/126700484   -拖拽
 https://www.itxst.com/vue-draggable/fueijmfy.html                 -拖拽
 https://blog.csdn.net/Geek_ting/article/details/122300291  -小程序授权
*/