本文基于
vue+elementUI
最近有个需求，需要做成如下的样子：
1、子组件map-component.vue
<template>
<div class="repair_map homepage">
<div class="search-box">
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="按地址查询" name="address">
<input
v-model="mapParent.searchKey"
type="search"
class="address_input"
id="search"
/>
<button @click="search">搜索</button>
</el-tab-pane>
<el-tab-pane label="按经纬度查询" name="lngLat">
<input
v-model="mapParent.lng"
type="search"
placeholder="经度"
class="lngLat_input"
/>
<input
v-model="mapParent.lat"
type="search"
placeholder="纬度"
class="lngLat_input"
/>
<button @click="search">搜索</button>
</el-tab-pane>
</el-tabs>
</div>
<div id="container"></div>
<div class="sure_button">
<el-button type="primary" @click="savePosition">确 定</el-button>
</div>
</div>
</template>
<script>
export default {
props: {
mapParent: Object
},
data() {
return {
activeName: "address",
markers: [],
map: null
};
},
methods: {
savePosition() {
this.$emit("savePosition");
this.closeDialog();
},
closeDialog() {
this.$emit("close");
},
initMap() {
this.map = new AMap.Map("container", {
viewMode: "2D",
zoom: 15, //初始化地图层级
center: [this.mapParent.lng, this.mapParent.lat]
});
this.addMarker(this.mapParent.lng, this.mapParent.lat);
let self = this;
AMap.plugin(["AMap.Geocoder"], () => {
let geocoder = new AMap.Geocoder({
radius: 1000
});
// 绑定事件
self.map.on("click", function(ev) {
// console.log(ev, "点击获取经纬度");
// 获取经纬度
self.mapParent.lng = ev.lnglat.lng;
self.mapParent.lat = ev.lnglat.lat;
self.addMarker(self.mapParent.lng, self.mapParent.lat);
// 获取地址
geocoder.getAddress(
[self.mapParent.lng, self.mapParent.lat],
function(status, result) {
if (status === "complete" && result.regeocode) {
// console.log("address地址", result);
self.mapParent.searchKey = result.regeocode.formattedAddress;
} else {
console.log("位置获取失败");
}
}
);
});
});
},
// 添加点标记
addMarker(lng, lat) {
this.map.remove(this.markers);
let marker = new AMap.Marker({
icon: require("@/assets/imgs/homeImg/mark_bsblue.png"),
position: [lng, lat],
offset: new AMap.Pixel(-13, -30)
});
this.markers.push(marker);
this.map.add(marker);
},
// 搜索
search() {
let self = this;
// 根据地址查询
if (this.activeName === "address") {
this.map.plugin("AMap.Autocomplete", function() {
// 实例化Autocomplete
var autoOptions = {
city: "北京"
};
var autoComplete = new AMap.Autocomplete(autoOptions);
autoComplete.search(self.mapParent.searchKey, function(
status,
result
) {
// 搜索成功时，result即是对应的匹配数据
// console.log(result.tips[0].location, "哈哈哈");
self.mapParent.lng = result.tips[0].location.lng;
self.mapParent.lat = result.tips[0].location.lat;
self.addMarker(self.mapParent.lng, self.mapParent.lat);
self.map.setCenter([self.mapParent.lng, self.mapParent.lat]);
self.map.setZoom(16);
});
});
}
// 根据经纬度查询
if (this.activeName === "lngLat") {
this.addMarker(this.mapParent.lng, this.mapParent.lng);
let geocoder;
this.map.plugin(["AMap.Geocoder"], function() {
geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
geocoder.getAddress(
[self.mapParent.lng, self.mapParent.lng],
function(status, result) {
if (status === "complete" && result.info === "OK") {
if (result && result.regeocode) {
// 点击地图选择地址
self.mapParent.searchKey = result.regeocode.formattedAddress;
self.map.setCenter([self.mapParent.lng, self.mapParent.lng]);
}
}
}
);
});
}
}
},
mounted() {
//DOM初始化完成进行地图初始化
let self = this;
setTimeout(function() {
self.initMap(self.mapParent.lat, self.mapParent.lng);
}, 500);
}
};
</script>
<style lang="less">
.repair_map {
position: relative;
width: 100%;
height: 500px;
.search-box {
position: absolute;
z-index: 5;
width: 70%;
left: 13%;
top: 10px;
height: 30px;
.address_input {
float: left;
width: 80%;
height: 24px;
border: 1px solid #30ccc1;
padding: 0 8px;
outline: none;
}
.lngLat_input {
float: left;
width: 30%;
height: 22px;
border: 1px solid #30ccc1;
padding: 0 8px;
outline: none;
margin-right: 5px;
}
button {
float: left;
width: 20%;
height: 100%;
background: #30ccc1;
border: 1px solid #30ccc1;
color: #fff;
outline: none;
cursor: pointer;
}
}
.sure_button {
margin-top: 10px;
text-align: right;
}
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 90%;
}
}
</style>
2、父组件中引用
<el-dialog
title="选择地址"
:visible.sync="mapDialogVisible"
width="50%"
append-to-body // Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
:close-on-click-modal="false"
@close="closeMap"
>
<map-component
:mapParent="mapParent"
@savePosition="selectPosition"
@close="closeMap"
></map-component>
</el-dialog>
export default {
data() {
return {
mapDialogVisible: false,
mapParent: {
lng: 116.408718,
lat: 39.910783,
searchKey: ""
},
baseFormData: {
repairAddr: "",
longitude: 116.408718,
latitude: 39.910783
},
}
},
methods: {
openMap() {
this.mapParent.searchKey = this.baseFormData.repairAddr;
this.mapParent.lng = this.baseFormData.longitude;
this.mapParent.lat = this.baseFormData.latitude;
this.mapDialogVisible = true;
},
selectPosition() {
this.baseFormData.longitude = this.mapParent.lng;
this.baseFormData.latitude = this.mapParent.lat;
this.baseFormData.repairAddr = this.mapParent.searchKey;
},
closeMap() {
this.mapDialogVisible = false;
},
}
}
