index.html引入JS 自己申请KEY哦
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=0250860ccb5953fa5d655e8acf40ebb7&plugin=AMap.Geocoder"></script>
<!-- <script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.5&key=e85674d8a91481719a16c2ccda50b51b&plugin=AMap.Geocoder"></script> -->
<template>
<div id="rootMap">
<div id="map"
ref="map"></div>
<input class="inputclass"
v-model="address"
placeholder="请输入地址" />
<div class="box">
<van-button type="primary"
native-type="button"
@click="geocoder()">搜索</van-button>
<van-button type="primary"
native-type="button"
@click="SendLngLat()">确定</van-button>
</div>
</div>
</template>
<script>
import { Toast } from "vant";
// import BMap from "BMap";
export default {
data () {
return {
timer: null,
map: "",
searchKey: "河南省信阳市",
currentLonLat: [],
address: "",
lnglat: '',
};
},
watch: {
},
mounted () {
this.getMap();
},
methods: {
getMap () {
//创建地图
this.map = new AMap.Map("map", {
//mapStyle: 'amap://styles/grey',
zoom: 13,
center: [114.119, 32.116]
});
//地图点击事件
this.map.on("click", this.showInfoClick);
},
showInfoClick (e) {
this.map.clearMap();//清理地图
let lng = e.lnglat.getLng(); //获取经度
let lat = e.lnglat.getLat(); //获取纬度
console.log(e, lng, lat);
this.regeocoder([lng, lat])
//marker点
let marker = new AMap.Marker({
position: [lng, lat],
offset: new AMap.Pixel(-13, -30)
});
this.map.add(marker); //加载点
this.map.setFitView(); //缩放至地图
this.lnglat = lng + "," + lat;//将经纬度绑定至input输入框
},
// 通过经纬度获取地址
regeocoder (loc) { //逆地理编码
console.log(loc);
var that = this
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
geocoder.getAddress(loc, function (status, result) {
if (status === 'complete' && result.info === 'OK') {
console.log(result);
var address = result.regeocode.formattedAddress; //返回地址描述
that.address = address
that.currentLonLat = [...loc, address];
console.log(that.currentLonLat);
}
});
},
//搜索按钮事件 通过地址获取经纬度
geocoder () {
console.log(this.address);
this.map.clearMap();
var that = this
var myGeo = new AMap.Geocoder();
//地理编码,返回地理编码结果
myGeo.getLocation(this.address, function (status, result) {
if (status === 'complete' && result.info === 'OK') {
//地址解析成功
// var address = data.regeocode.formattedAddress;
var x = result.geocodes[0].location.lng;
var y = result.geocodes[0].location.lat;
that.currentLonLat = [x, y, that.address];
console.log(that.currentLonLat);
that.getMap(x, y);
// that.regeocoder(XY);
that.punctuation(x, y); //更新标记
} else {
//地址解析失败
alert("地址不存在")
}
});
},
// 标记点
punctuation (x, y) {
let marker = new AMap.Marker({
position: [x, y],
offset: new AMap.Pixel(-13, -30)
});
this.map.add(marker); //加载点
this.map.setFitView(); //缩放至地图
},
//点击确定后把经纬度传给父vue
SendLngLat () {
console.log(this.currentLonLat.length);
if (this.currentLonLat.length > 0) {
this.$emit("SendLngLat", this.currentLonLat);
} else {
Toast("请点击地图上的点获取坐标!");
}
}
}
};
</script>
<style lang="scss" scoped>
#rootMap {
height: 100%;
width: 100%;
position: relative;
}
#map {
height: 100%;
width: 100%;
position: relative;
}
.inputclass {
position: absolute;
width: 180px;
height: 30px;
top: 0;
left: 0;
font-size: 14px;
}
.box {
position: absolute;
left: 0;
top: 40px;
}
</style>
以下为父组件的组件引入
<GaodeMap @SendLngLat="SendLngLat"></GaodeMap>
// 接受从子组件传过来的值
SendLngLat (data) {
this.currentLonLatList = data;
// console.log(this.currentLonLatList);
if (this.currentLonLatList.length) {
this.formInfo.data.sewerageUserAddress = this.currentLonLatList[2];
this.formInfo.data.lon = this.currentLonLatList[0];
this.formInfo.data.lat = this.currentLonLatList[1];
this.showType6 = false;
}
// console.log(this.ruleform);
},
H5移动端 引入高德地图(获取经纬度与地址带搜索反选
于 2022-07-12 13:22:03 首次发布