|
@@ -32,10 +32,17 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
},
|
|
|
+ info: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
map: null,
|
|
|
+ geocoder: null,
|
|
|
inputVal2: "",
|
|
|
autocomplete: null,
|
|
|
markers: [], // 标记数组
|
|
@@ -53,16 +60,28 @@ export default {
|
|
|
AMapLoader.load({
|
|
|
key: window.__systemConf.mapKey,
|
|
|
version: "2.0",
|
|
|
- plugins: [],
|
|
|
+ plugins: ["AMap.Geocoder"],
|
|
|
}).then((Amap) => {
|
|
|
_this.map = new Amap.Map("map-container", {
|
|
|
zoom: 11,
|
|
|
resizeEnable: true,
|
|
|
+ center: [this.geoFormData.longitude, this.geoFormData.latitude],
|
|
|
});
|
|
|
- this.addMarker(Amap, {
|
|
|
- lng: this.geoFormData.longitude,
|
|
|
- lat: this.geoFormData.latitude,
|
|
|
+ this.geocoder = new Amap.Geocoder({
|
|
|
+ radius: 1000,
|
|
|
});
|
|
|
+ _this.map.on("click", (e) => {
|
|
|
+ console.log(e);
|
|
|
+ this.regeoCode(e.lnglat);
|
|
|
+ });
|
|
|
+ this.addMarker(
|
|
|
+ Amap,
|
|
|
+ {
|
|
|
+ lng: this.geoFormData.longitude,
|
|
|
+ lat: this.geoFormData.latitude,
|
|
|
+ },
|
|
|
+ this.geoFormData.address
|
|
|
+ );
|
|
|
Amap.plugin(["AMap.PlaceSearch", "AMap.AutoComplete"], () => {
|
|
|
const autoOptions = {
|
|
|
input: "tipinput",
|
|
@@ -123,6 +142,20 @@ export default {
|
|
|
clearMarker() {
|
|
|
this.markers.forEach((marker) => this.map.remove(marker));
|
|
|
},
|
|
|
+ regeoCode(lnglat) {
|
|
|
+ this.geocoder.getAddress(lnglat, (status, result) => {
|
|
|
+ if (status === "complete" && result.regeocode) {
|
|
|
+ const address = result.regeocode.formattedAddress;
|
|
|
+ console.log(address);
|
|
|
+ this.geoFormData.address = address;
|
|
|
+ this.geoFormData.longitude = lnglat.lng.toString();
|
|
|
+ this.geoFormData.latitude = lnglat.lat.toString();
|
|
|
+ this.$emit("change", this.geoFormData);
|
|
|
+ } else {
|
|
|
+ log.error("根据经纬度查询地址失败");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -152,8 +185,16 @@ export default {
|
|
|
}
|
|
|
/deep/ .amap-marker-label {
|
|
|
// background-color: red;
|
|
|
+ width: 120px;
|
|
|
+ // height: 40px;
|
|
|
+ // word-wrap: break-word;
|
|
|
+ white-space: pre-wrap;
|
|
|
background: #ffffff;
|
|
|
border-radius: 4px;
|
|
|
padding: 8px 4px 8px 8px;
|
|
|
+ .info {
|
|
|
+ // height: 40px;
|
|
|
+ word-wrap: break-word;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|