网站规划设计的步骤,wordpress 主题 cdc,江阴网站建设哪家好,广州外贸网站建设首先注册高德key
https://console.amap.com/dev/key/a vue项目中安转地图包
pnpm i amap/amap-jsapi-loader -S
先说最重要核心#xff0c;踩雷过
页面中需写入以下代码#xff0c;现在注册的高德key要求强制写入安全密钥
window._AMapSecurityConfig {securityJsCode…首先注册高德key
https://console.amap.com/dev/key/a vue项目中安转地图包
pnpm i amap/amap-jsapi-loader -S
先说最重要核心踩雷过
页面中需写入以下代码现在注册的高德key要求强制写入安全密钥
window._AMapSecurityConfig {securityJsCode: c3d717e94ace33f46e7354f5a4633faa,
};
业务代码
templateel-dialog v-modelisVisible title考勤地点 width70%div classcotainerdiv classmodule-searchdiv classtitle地点:/divdiv classbox-iptel-input v-modellocationName stylewidth: 420px placeholder请输入位置 //divel-button typeprimary搜索/el-button/divdiv refmapRef classmap/div/divtemplate #footerspan classdialog-footerel-button clickonClose关闭/el-buttonel-button v-iftype ! view typeprimary clickonConfirm确认/el-button/span/template/el-dialog
/template
script setup
import { defineComponent, toRefs, reactive, getCurrentInstance, ref, onMounted } from vue;
import AMapLoader from amap/amap-jsapi-loader;
window._AMapSecurityConfig {securityJsCode: 安全密钥,
};const initMap () {AMapLoader.load({key: 申请好的Web端开发者Key, // 申请好的Web端开发者Key首次调用 load 时必填plugins: [AMap.Scale, AMap.Geocoder], // 需要使用的的插件列表如比例尺AMap.Scale等AMapUI: {version: 1.1,},}).then((AMap) {const map new AMap.Map(mapRef.value, {viewMode: 2D,zoom: 12,center: [116.295797, 40.042976],resizeEnable: true, // 监控地图容器尺寸变化默认值为falseexpandZoomRange: true, // 支持可以扩展最大缩放级别和zooms属性配合使用设置为true的时候zooms的最大级别在PC上可以扩大到20级});let marker new AMap.Marker({icon: ,position: lnglatData.value,offset: new AMap.Pixel(-12, -32), // //标记点相对偏移量可以固定其地址不随着地图缩放而偏移draggable: !mapDisabled.value, // 点标记对象是否可拖拽移动defaultCursor: pointer,});map.add(marker);let geocoder new AMap.Geocoder({city: 010, // 城市设为北京默认“全国”radius: 1000, // 范围默认500});map.on(click, (e) {console.log(mapDisabled.value, ---mapDisabled.value);if (mapDisabled.value true) {// return;} else {let arr [];arr[0] e.lnglat.lng.toString();arr[1] e.lnglat.lat.toString();regeoCode(arr);}});function regeoCode(e) {let lnglat e;console.log(e, ---e);lnglatData.value[0] e[0];lnglatData.value[1] e[1];map.add(marker);marker.setPosition(lnglat);geocoder.getAddress(lnglat, (status, result) {if (status complete result.regeocode) {let address result.regeocode.formattedAddress;locationName.value address;console.log(address, ---address);}});}}).catch((e) {console.log(e, 1111);});
};/script
