上饶有哪些做网站的公司,企业网站美工设计,设计公司网页模板,wordpress rss插件在vue3中引入高德地图API要实现的功能
设置地图的显示样式实现点击地图添加标记、点击地图获取详细地址和经纬度输入框搜索获取相关地区提示#xff08;下拉框#xff0c;选中后进行标记#xff0c;视角移动到相对位置#xff09;输入框输入内容#xff0c;回车获取详细地…在vue3中引入高德地图API要实现的功能
设置地图的显示样式实现点击地图添加标记、点击地图获取详细地址和经纬度输入框搜索获取相关地区提示下拉框选中后进行标记视角移动到相对位置输入框输入内容回车获取详细地址和经纬度
1、准备工作 官方文档 V2.0https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 官方参考手册https://lbs.amap.com/api/jsapi-v2/documentation 先进入高德开放平台跟着步骤注册账号创建应用 创建时服务平台要选择【web端JS API】如果选其他服务有些功能用不了比如后面的地址逆解析。 官网示例地址地图的创建-生命周期-示例中心-JS API 示例 | 高德地图API (amap.com)
2、用npm/yarn下载包初始化地图
在Vue 3中引入高德地图你可以按照以下步骤进行操作 在项目目录中使用npm或yarn安装高德地图的JavaScript API库。你可以使用以下命令之一
npm install amap/amap-jsapi-loader
yarn add amap/amap-jsapi-loader2.1、注意事项
1、必须要有安全密钥不然有的api调用返回为undefined
window._AMapSecurityConfig {// 安全密钥securityJsCode: 95869xxxxxxxxxxxxxxxxx53df87dfb,
};3、组件代码需要替换密钥和key templatediv idcontainer/div
/templatescript setup langts
import AMapLoader from amap/amap-jsapi-loader
import { onMounted, watch, defineProps,defineEmits,onUnmounted,ref, reactive } from vue
import { log } from console// 使用defineEmits创建名称接受一个数组
const emit defineEmits([clickChild]);
const props defineProps({childValue: {default:},infos:{type:Object,default:{lng:undefined,lat:undefined}}
});
let isTrueref(false)
let isProductionref(true)
let optionsref([])
let map:any null
//标记点
let marker
// 地址逆解析
let geoCoder:anynull
// 位置信息
let form ref({lng: ,lat: ,address: ,//地区编码adcode: ,
})
let AutoComplete:anynull
window._AMapSecurityConfig {securityJsCode: 95869xxxxxxxxxxxxxxxxx53df87dfb,
}
watch(() props.childValue,(newValue, oldValue) {if(isProduction.value){// 地理编码geoCode()}else{// 搜索提示remoteMethod(newValue)}}
);watch(() isTrue.value,(newValue, oldValue) {if(newValueprops.infos.lng){// 获取经纬度form.value.lng props.infos.lng;form.value.lat props.infos.lat;// 清除点removeMarker();// 标记点setMapMarker();}}
);
watch(() props.infos.lng,(newValue, oldValue) {if(newValueisTrue.value){// 获取经纬度form.value.lng props.infos.lng;form.value.lat props.infos.lat;// 清除点removeMarker();// 标记点setMapMarker();}}
);
// 搜索
function remoteMethod(query:any) {if (query ! ) {AutoComplete.search(query, (status:any, result:any) {options.value result.tips;let obj{options:options.value}emit(clickChild, obj);} else {options.value [];}
}// 标记点
function setMapMarker() {// 自动适应显示想显示的范围区域map.setFitView();marker new AMap.Marker({map: map,position: [form.value.lng, form.value.lat],});map.setFitView();// // 逆解析地址// toGeoCoder();map.add(marker);
}
// 清除点
function removeMarker() {if (marker) {map.remove(marker);}
}//正解析地址
function geoCode(){let geocoder new AMap.Geocoder({// city: 010, //城市设为北京默认“全国”radius: 1000 //范围默认500});let address props.childValue;geocoder.getLocation(address, function(status:any, result:any) {if (status completeresult.geocodes.length) {var e result.geocodes[0].location// 获取经纬度form.value.lng e.lng;form.value.lat e.lat;// 清除点removeMarker();// 标记点setMapMarker();let obj{ParkLongitude:form.value.lng,ParkLatitude:form.value.lat,address:address}emit(clickChild, obj);}else{// log.error(根据地址查询位置失败);}});
}
// 逆解析地址
function regeoCode() {let geocoder new AMap.Geocoder({// city: 010, //城市设为北京默认“全国”radius: 1000 //范围默认500});let lnglat [form.value.lng,form.value.lat];geocoder.getAddress(lnglat, function(status:any, result:any) {if (status completeresult.regeocode) {let address result.regeocode.formattedAddress;// 解析的地址address;let obj{ParkLongitude:form.value.lng,ParkLatitude:form.value.lat,address:address}emit(clickChild, obj);}else{// log.error(根据经纬度查询地址失败)}});
}//获取详细地址
function toGeoCoder() {AMap.plugin(AMap.Geolocation, function() {let geolocation new AMap.Geolocation({enableHighAccuracy: true,//是否使用高精度定位默认:truetimeout: 10000, //超过10秒后停止定位默认5sposition:RB, //定位按钮的停靠位置offset: [form.value.lng, form.value.lat], //定位按钮与设置的停靠位置的偏移量默认[10, 20]zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点needAddress:true,});map.addControl(geolocation);geolocation.getCurrentPosition(function(status:any, result:any){if(statuscomplete){// onComplete(result)}else{// onError(result)}});});
}
onMounted(() {AMapLoader.load({key: 95869xxxxxxxxxxxxxxxxx53df87dfb,version: 2.0,// 需要用到的插件plugins: [AMap.Geocoder, AMap.AutoComplete,AMap.Geolocation],}).then((AMap) {map new AMap.Map(container, {viewMode: 3D,zoom: 11,mapStyle: amap://styles/grey, //设置地图的显示样式// center: [116.397428, 39.90923],})// 搜索提示插件AutoComplete new AMap.AutoComplete({ city: 全国 });//为地图注册click事件获取鼠标点击出的经纬度坐标map.on(click, function(e:any) {map.value e.lnglat.getLng() , e.lnglat.getLat()// 点击位置, e.lnglat;// 获取经纬度form.value.lng e.lnglat.lng;form.value.lat e.lnglat.lat;// 清除点removeMarker();// 标记点setMapMarker();regeoCode();});isTrue.valuetrue}).catch((e) {})
})
onUnmounted(() {map map.destroy();
})
/script
script langts
// 起名字否则每个组件在开发者工具中都为index
export default {name: Maps,
};
/script
style scoped
#container {width: 100%;height: 100%;
}
/style
