【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 -小程序授权
*/