Vue2（vue-amap） 最新高德地图获取坐标与地点信息＋搜索功能
效果https://i-blog.csdnimg.cn/direct/57ba1d3e1b174b94b4ab28b15a968cde.png
第一步:首先我们先去高德地图开放平台申请一个Key
https://i-blog.csdnimg.cn/direct/b6bb3b1e0135467db79da6b7c4468545.pnghttps://i-blog.csdnimg.cn/direct/fce9f5a9f14846559678a9375266a6b3.pnghttps://i-blog.csdnimg.cn/direct/8ef4745860b74b2da1c11459c5146a96.png
第二步:
需要安装地图插件
npm install vue-amap --save
第三步:
// 引入vue-amap
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
key: '你的Key',// key
plugin: [
'AMap.Geolocation',//定位空间，用来获取和展示用户主机所在的经纬度位置
' AMap.Autocomplete ',//输入提示插件
' AMap.PlaceSearch ', //POI搜索插件
' AMap.Scale ', //右下角缩略图插件，比例尺
' AMap.OverView ', //地图鹰眼插件
' AMap.ToolBar ',//地图工具条
' AMap.MapType ',//类别切换空间，实现默认图层与卫星图，实施交通层之间切换的控制
' AMap.PolyEditor ', //编辑 折线多边形
' AMap.CircleEditor ',
"AMap.Geocoder", //地图编码
'AMap.AMapManager',
'AMap.Marker'
],
// 高德 sdk 版本，默认为 1.4.4
v: '1.4.4',
uiVersion: '1.0' //ui版本
})
//高德的安全密钥
window._AMapSecurityConfig = {
securityJsCode: '你的密钥',
} 添加标签
<div style="border: 1px solid #cccccc">
<!-- //搜索框 -->
<el-amap-search-box
id="search"
:search-option="searchOption"
:on-search-result="onSearchResult"
/>
<!-- 地图 -->
<el-amap
class="amap-box"
:zoom="amap.zoom"
:center="amap.center"
:plugin="amap.plugin"
:events="amap.events"
>
<!-- 当前位置图标 -->
<el-amap-marker
v-for="(marker, index) in amap.markers"
:key="'marker' + index"
:position="marker.position"
/>
<!-- 位置名称显示 -->
<el-amap-text
v-for="(marker, index) in amap.markers"
:key="'text' + index"
:text="marker.text"
:offset="marker.offset"
:position="marker.position"
/>
</el-amap>
</div> 数据源:
export default {
name: "vehicleSpotInspection",
data() {
const vm = this;
return {
address: "",//需要传给后端的字段
// form对象
dataForm: getFormData(),
// 地图搜索对象
searchOption: {
city: "全国",
citylimit: true,
},
lng: 0,
lat: 0,
// 地图对象
amap: {
zoom: 16,
center: ,
events: {
// 点击获取地址的数据
click(e) {
const { lng, lat } = e.lnglat;
vm.dataForm.lon = lng;
vm.dataForm.lat = lat;
// 这里通过高德 SDK 完成。
var geocoder = new AMap.Geocoder({
radius: 100,
extensions: "all",
});
geocoder.getAddress(, function (status, result) {
if (status === "complete" && result.info === "OK") {
if (result && result.regeocode) {
console.log("点击获取地址的数据", result);
vm.dataForm.orgAddr = result.regeocode.formattedAddress;
vm.dataForm.province =
result.regeocode.addressComponent.province;
vm.dataForm.city = result.regeocode.addressComponent.city;
vm.dataForm.district =
result.regeocode.addressComponent.district;
vm.dataForm.lat = lat ? lat.toString() : "";
vm.dataForm.lon = lng ? lng.toString() : "";
vm.amap.markers = [];
const obj = {
position: ,
text: result.regeocode.formattedAddress,
offset: ,
};
vm.amap.markers.push(obj);
vm.sure();
}
}
});
// this.$nextTick().then(() => {
// // 在这里执行你需要在 DOM 更新后执行的代码
// });
},
},
plugin: [
{
// 定位
pName: "Geolocation",
events: {
init(o) {
// o是高德地图定位插件实例
o.getCurrentPosition((status, result) => {
console.log("定位：", result);
if (result && result.position) {
// 设置经度
vm.lng = result.position.lng;
// 设置维度
vm.lat = result.position.lat;
vm.address = result.formattedAddress; //获取具体位置
console.log("定位address", vm.address);
// 设置坐标
vm.amap.center = ;
let op = {
position: ,
text: vm.address, //提交之后显示的位置
offset: ,
};
vm.amap.markers.push(op);
// 页面渲染好后
// this.$nextTick().then(() => {
// // 在这里执行你需要在 DOM 更新后执行的代码
// });
}
});
},
},
},
],
//
markers: [],
},
};
}, 方法:
// 点击获取地址的数据
// 地图点击事件处理函数
onMapClick(e) {
const { lng, lat } = e.lnglat;
// 更新数据属性
this.dataForm.lon = lng;
this.dataForm.lat = lat;
// 使用 this.$amap 创建 Geocoder 实例
var geocoder = new this.$amap.Geocoder({
radius: 100,
extensions: "all",
});
geocoder.getAddress(, (status, result) => {
if (status === "complete" && result.info === "OK") {
if (result && result.regeocode) {
console.log("点击获取地址的数据", result);
this.dataForm.orgAddr = result.regeocode.formattedAddress;
this.dataForm.province = result.regeocode.addressComponent.province;
this.dataForm.city = result.regeocode.addressComponent.city;
this.dataForm.district = result.regeocode.addressComponent.district;
this.dataForm.lat = lat.toString();
this.dataForm.lon = lng.toString();
// 更新标记
this.amap.markers = [
{
position: ,
text: result.regeocode.formattedAddress,
offset: ,
},
];
// 调用其他方法，例如 sure()
this.sure();
}
}
});
},
// 地图搜索回调
onSearchResult(pois) {
const vm = this;
vm.amap.markers = [];
// 根据是否有搜索结果来启用或禁用搜索框
this.searchDisabled = pois && pois.length === 0;
let latSum = 0;
let lngSum = 0;
console.log("地图回调", pois);
if (pois.length > 0) {
pois.forEach((poi, index) => {
const { lng, lat } = poi;
if (index === 0) {
lngSum = lng;
latSum = lat;
const obj = {
position: ,
text: poi.name,
offset: ,
};
vm.amap.markers.push(obj);
console.log("地图搜索回调", poi);
vm.dataForm.orgAddr = poi.name;
vm.dataForm.lat = poi.lat ? poi.lat.toString() : "";
vm.dataForm.lon = poi.lng ? poi.lng.toString() : "";
}
});
vm.amap.center = ;
}
},
// 定位成功后更新位置信息的函数
updateLocationInfo(position) {
this.dataForm.lat = position.lat;
this.dataForm.lng = position.lng;
this.dataForm.orgAddr = position.formattedAddress; // position 对象中有 formattedAddress 属性
console.log("更新位置", this.dataForm);
// 更新地图中心点和标记
this.amap.center = ;
this.amap.markers = [
{
position: ,
text: this.address,//这里改成后台提供的字段可以提交给后台
offset: ,
},
];
},
// 提交方法
sure() {
const vm = this;
console.log(this.amap.markers);
this.$emit("updateLocation", vm.dataForm);
}, 碰到的问题:1.有的可能会提示 找不到AMap模块 可以引入 import AMap from 'AMap'
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]