vue高德地图路线规划,高德地图vue开发
本文主要介绍了在Vue3管理后台项目中利用高德地图选点的实现。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。
目录
前言获取地图关键字介绍地图JSAPI使用扩展初始化地图地图选择点组件
前言
最近的管理后台项目中，有一个业务场景，添加了店铺的地址和经纬度。地址可以输入，但是经纬度不合适。用户最好在地图上搜索或者直接点击，获取该点的经纬度等详细信息。因为我们的app使用了高德地图，所以我在管理后台也使用了高德地图来实现上述业务需求。我们来看看具体的使用流程。
获取地图Key
登录高德开放平台创建应用，添加密钥，选择Web端(JS API)，生成密钥和安全密钥。
引入地图 JSAPI
项目中使用官方推荐的JSAPILoader来加载地图。
安装官方npm包@amap/amap-jsapi-loader，配置安全密钥(不安全方式)。其他配置方式是在这里设置脚本。
从“@amap/amap-jsapi-loader”导入AMapLoader
窗户。_AMapSecurityConfig={
SecurityJsCode:您申请的安全密钥，
};
/脚本
初始化地图
创建一个id为mapContainer的div元素，并调用initMap方法来初始化相关的地图插件脚本设置。
const map=shallow ref(null)；
让AMapObj
函数initMap() {
AMapLoader.load({
密钥：“您申请的密钥”，
版本：“2.0”，
}).然后(AMap={
AMapObj=AMap
map.value=新AMap。地图( map container )；
})
}
/脚本
地图选点
该项目提供了两种方法：搜索和直接点击地图。
搜索点选择：使用element-plus的autocomplete组件结合地图搜索服务实现下拉位置选择和点击点选择：使用地图点击事件获取位置的经纬度信息，然后使用地图反向地理编码api分析地址信息并选择位置，然后同步绘制标记，并将标记移动到地图中心并设置缩放比例。
组件化使用
为了便于一整套逻辑的重用，我将上述所有流程封装到一个组件中，并通过v-model绑定所选位置的详细信息，以便于选择位置后将信息同步到父组件。
贴出下面所有组件的代码。
模板
div class=地图包装
div id=mapcontainer/div
div class=搜索框
El-自动完成
v-model=keyword
:fetch-suggestions= handle search
:trigger-on-focus=false
可清除的
Placeholder=输入城市关键字搜索
@select=handleSelect
style=width: 300px
/
el输入
v-model=location .经度
Placeholder=单击地图选择经度
maxlength=15
只读的
style= width:150 px；边距：0 5px
/el-input
el输入
v-model=位置.纬度
Placeholder=单击地图选择纬度
maxlength=15
只读的
style=width: 150px
/el-input
/div
/div
/模板
脚本设置
从“@amap/amap-jsapi-loader”导入AMapLoader
窗户。_AMapSecurityConfig={
SecurityJsCode:您申请的安全密钥，
};
const props=defineProps({
模型值：{
类型：对象，
默认(){
return { }；
},
},
});
const emit=define emits([ update:model value ])；
const map=shallow ref(null)；
//位置
常量位置=计算值({
get() {
返回props.modelValue
},
设置(值){
emit(update:modelValue ，val)；
},
});
手表(位置，(值)={
if (val .经度val .纬度值){
draw marker()；
}
}
);
const keyword=ref()；
let placeSearch，AMapObj，marker，geocoder
函数initMap() {
AMapLoader.load({
密钥： ,//申请好的网端钥匙，首次调用负荷时必填
版本："2.0"
}).然后(AMap={
AMapObj=AMap
map.value=新地图.地图(“地图容器”)；
//添加点击事件
map.value.on(click ，onMapClick)；
if (location.value。经度){
绘制标记()；
}
AMap。插件（
地图.工具栏，地图.比例尺,地图。地理定位,地图PlaceSearch ， AMap .地理编码器],
()={
//缩放条
常量工具栏=新地图.ToolBar()；
//比例尺
常量刻度=新地图.scale()；
//定位
常数地理位置=新地图.地理定位({
enablehigaccuracy:true，//是否使用高精度定位，默认：正确
超时：10000,//超过10秒后停止定位，默认：5s
位置： RT ，//定位按钮的停靠位置
按钮偏移量：新地图.Pixel(10，20)，//定位按钮与设置的停靠位置的偏移量，默认：像素(10,20)
zoomto准确性：true，//定位成功后是否自动调整地图视野到定位点
});
地理编码器=新地图。地理编码器({
城市： 全国，
});
map.value.addControl(地理定位);
map.value.addControl(工具栏);
地图。价值。添加控件(刻度)；
placeSearch=新地图。地点搜索({
map: map.value，
城市： ,
页面大小：30,//单页显示结果条数
pageIndex: 1，//页码
citylimit: false，//是否强制限制在设置的城市内搜索
autoFitView: true，
});
}
);
})
}
onMounted(()={
init map()；
});
//搜索地图
函数handleSearch(queryString，cb) {
placeSearch.search(queryString，(status，result)={
if(结果类型的结果=== object 结果。poilist){
常量列表=结果。poilist。pois
list.forEach(item={
项目。值=项目。姓名；
项目。标签=项目。姓名；
});
cb(列表);
} else {cb([])}
});
}
//点击地图
函数onMapClick(e) {
const { lng，lat }=e . ln glat
//逆地理编码
geocoder.getAddress([lng，lat]，(status，result)={
if(状态===完成结果。info=== OK ){
const { addressComponent，格式化地址}=结果。regeocode
让{城市、省、区}=地址组件
如果(!城市){
//直辖市
城市=省；
}
location.value={
经度：液化天然气，
纬度：纬度，
地址：格式地址，
区：[省、市、区],
};
}
});
}
//点击搜索项
函数句柄选择（项目){
const { pname，cityname，adname，address，name }=item
const { lng，lat }=项目.位置
location.value={
经度：液化天然气，
纬度：纬度，
地址，
区域：[pname，cityname，adname]，
姓名，
};
map.value.setZoomAndCenter(16，[lng，lat])；
}
//绘制地点标记
函数绘图标记(瓦尔){
常数{经度，纬度}=location.value val
如果(标记){
马克笔。设置映射(空)；
}
标记=新AMapObj .标记({
位置：新AMapObj .英格拉特(经度，纬度),
锚："底部中间",
});
map.value.add(标记);
map.value.setZoomAndCenter(16，[经度，纬度]);
}
/脚本
样式lang=scss 范围。地图包装{
位置：相对；
宽度：100%;
高度：400像素
#mapcontainer {
宽度：100%;
身高：100%;
}。搜索框{
位置：绝对；
top:10px；
左：10px
z指数：1;
显示器：flex
对齐-项目：居中；
}
}
/风格
拓展
如果系统适应了黑暗模式，你可以通过监控当前黑暗模式状态，在地图的光明主题和黑暗主题之间动态切换，从而实现地图黑暗模式的适应，这个就留给大家自己去探索了。
以上就是本文关于使用高德地图选择实现Vue3管理后台项目的内容。关于Vue3高德地图选择的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。