html源码:
<div id="my_container"></div>
js源码:
export default {
name: "company_manage",
data() {
return {
ruleForm: {
addr: "",
long: "",
lat: "",
}
};
},
mounted: function() {
this.init();
},
methods: {
init() {
var map = new AMap.Map("my_container", {
resizeEnable: true,
zoom: 10
});
AMap.plugin("AMap.Geolocation", function() {
//异步加载插件
var geolocation = new AMap.Geolocation();
map.addControl(geolocation);
});
var geocoder, marker;
function regeocoder(lnglatXY, that) {
AMap.plugin("AMap.Geocoder", function() {
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
geocoder.getAddress(lnglatXY, function(status, result) {
if (status === "complete" && result.info === "OK") {
var address = result.regeocode.formattedAddress;
that.ruleForm.addr = address;
}
});
if (!marker) {
marker = new AMap.Marker();
map.add(marker);
}
marker.setPosition(lnglatXY);
});
}
var that = this;
//点击事件
map.on("click", function(e) {
var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];
regeocoder(lnglatXY, that);
that.ruleForm.long = e.lnglat.getLng();
that.ruleForm.lat = e.lnglat.getLat();
// 获取经纬度
console.log(lnglatXY);
// 根据经纬度获取详细地址
$.ajax({
url:
"http://restapi.amap.com/v3/geocode/regeo?key=你的key&location=" +
lnglatXY[0] +
"," +
lnglatXY[1] +
"&poitype=&radius=1000&extensions=all&batch=false&roadlevel=0",
method: "get"
}).done(function(msg) {
//注意获取过来就是一个对象
var addressName = msg.regeocode.formatted_address;
console.log(addressName);
});
});
}
}
};