fengdong777
2 years ago
7 changed files with 114 additions and 337 deletions
@ -1,252 +1,75 @@ |
|||
<template> |
|||
<div class="amap-page-container" style="width: 600px; height:300px;margin:30px 10%;"> |
|||
<el-amap-search-box |
|||
class="search-box" |
|||
:search-option="searchOption" |
|||
:on-search-result="onSearchResult" |
|||
></el-amap-search-box> |
|||
<el-amap |
|||
ref="map" |
|||
:vid="workId" |
|||
:amap-manager="amapManager" |
|||
:center="center" |
|||
:zoom="zoom" |
|||
:plugin="plugin" |
|||
:events="events" |
|||
class="amap-demo" |
|||
<div class="coord-picker"> |
|||
<div class="map-container"> |
|||
<amap |
|||
cache-key="coord-picker-map" |
|||
mmap-style="amap://styles/whitesmoke" |
|||
async |
|||
:center.sync="center" |
|||
:zoom.sync="zoom" |
|||
is-hotspot |
|||
> |
|||
</el-amap> |
|||
<!-- <p>{{ address }}</p> |
|||
<p>{{ center }}</p> --> |
|||
<div class="footer"> |
|||
<Input class="lineinput" v-model.number="lng" disabled></Input> |
|||
<Input class="lineinput" v-model.number="lat" disabled></Input> |
|||
<Input class="lineinput" v-model="address" disabled></Input> |
|||
</div> |
|||
<div class="drawer-footer"> |
|||
<Button type="text" @click="cancel">{{ $t("cancel") }}</Button> |
|||
<Button type="primary" @click="findlocation">{{ |
|||
$t("sure") |
|||
}}</Button> |
|||
<amap-marker v-if="position" :position.sync="position" draggable /> |
|||
</amap> |
|||
</div> |
|||
</div> |
|||
|
|||
</template> |
|||
<script> |
|||
import { AMapManager } from "vue-amap"; |
|||
let amapManager = new AMapManager(); |
|||
export default { |
|||
props:{ |
|||
workId:String |
|||
}, |
|||
data() { |
|||
const self = this; |
|||
return { |
|||
locData: { |
|||
longitude: "", |
|||
latitude: "", |
|||
address: "", |
|||
province:"", |
|||
city:"", |
|||
district:"" |
|||
props: { |
|||
timeStamp: { |
|||
type: Number, |
|||
}, |
|||
searchOption: { |
|||
city: "",//搜索范围 |
|||
citylimit: false, //限制搜索范围 |
|||
//city: "", citylimit: false, // 不限制搜索范围搜索，比如想全国搜索 |
|||
mapData: { |
|||
type: String, |
|||
}, |
|||
lng: "", |
|||
lat: "", |
|||
address: "", |
|||
province:"", |
|||
city:"", |
|||
district:"", |
|||
marker: "", |
|||
amapManager, |
|||
zoom: 12, |
|||
center: [121.59996, 31.197646], |
|||
amapamapDemo:'amapamapDemo', |
|||
events: { |
|||
init: (o) => { |
|||
o.getCity((result) => { |
|||
// console.log(result); |
|||
// this.searchOption.city=result.city |
|||
}); |
|||
}, |
|||
moveend: () => {}, |
|||
zoomchange: () => {}, |
|||
click: (e) => { |
|||
// console.log(e.lnglat); |
|||
self.lng = e.lnglat.lng; |
|||
self.lat = e.lnglat.lat; |
|||
self.center = [self.lng, self.lat]; |
|||
// console.log(e.lnglat, 1999); |
|||
|
|||
let o = amapManager.getMap(); |
|||
if (!self.marker) { |
|||
self.marker = new AMap.Marker({ |
|||
position: e.lnglat, |
|||
}); |
|||
self.marker.setMap(o); |
|||
} |
|||
self.marker.setPosition(e.lnglat); |
|||
let geocoder = new AMap.Geocoder({}); |
|||
|
|||
geocoder.getAddress(e.lnglat, function (status, result) { |
|||
if (status === "complete" && result.regeocode) { |
|||
self.address = result.regeocode.formattedAddress; |
|||
self.province=result.regeocode.addressComponent.province |
|||
self.city=result.regeocode.addressComponent.city |
|||
self.district=result.regeocode.addressComponent.district |
|||
if(self.city==""){ |
|||
self.city=self.province |
|||
} |
|||
console.log('self',self.province,self.city,self.district); |
|||
// console.log(self.address, "999地址"); |
|||
} else { |
|||
log.error("根据经纬度查询地址失败"); |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
plugin: [ |
|||
"ToolBar", |
|||
{ |
|||
pName: "MapType", |
|||
defaultType: 0, |
|||
events: { |
|||
init(o) { |
|||
// console.log(o); |
|||
}, |
|||
data() { |
|||
return { |
|||
center: null, |
|||
zoom: 10, |
|||
position: null, |
|||
}; |
|||
}, |
|||
watch: { |
|||
timeStamp() { |
|||
this.center = [115.479646, 35.234309]; |
|||
this.zoom = 10; |
|||
this.position = null; |
|||
this.initMap(); |
|||
}, |
|||
], |
|||
plugin: [ |
|||
{ |
|||
pName: "Geolocation", |
|||
events: { |
|||
init(o) { |
|||
// o 是高德地图定位插件实例 |
|||
o.getCurrentPosition((status, result) => { |
|||
// console.log(JSON.stringify(result)); |
|||
if (result && result.position) { |
|||
self.lng = result.position.lng; |
|||
self.lat = result.position.lat; |
|||
self.address = result.formattedAddress; |
|||
self.center = [self.lng, self.lat]; |
|||
// console.log(self.center, 99666); |
|||
let o = amapManager.getMap(); |
|||
if (!self.marker) { |
|||
self.marker = new AMap.Marker({ |
|||
position: self.center, |
|||
}); |
|||
self.marker.setMap(o); |
|||
} |
|||
self.marker.setPosition(self.center); |
|||
} |
|||
}); |
|||
mapData() { |
|||
this.initMap(); |
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
created() { |
|||
this.initMap(); |
|||
}, |
|||
methods: { |
|||
onSearchResult(pois) { |
|||
console.log('pois',pois); |
|||
if (pois.length > 0) { |
|||
let { lng, lat, name ,location} = pois[0]; |
|||
this.searchName=pois[0].name |
|||
let center = [lng, lat]; |
|||
this.lng = lng; |
|||
this.lat = lat; |
|||
this.center = [lng, lat]; |
|||
let o = amapManager.getMap(); |
|||
if (!this.marker) { |
|||
this.marker = new AMap.Marker({ |
|||
position: center, |
|||
}); |
|||
this.marker.setMap(o); |
|||
} |
|||
this.marker.setPosition(center); |
|||
// 近来补充 根据经纬度查询地址 |
|||
let geocoder = new AMap.Geocoder({}); |
|||
let that = this |
|||
geocoder.getAddress(location, function(status, result) { |
|||
console.log(status, result) |
|||
if (status === "complete" && result.regeocode) { |
|||
that.address = result.regeocode.formattedAddress; |
|||
that.province=result.regeocode.addressComponent.province |
|||
that.city=result.regeocode.addressComponent.city |
|||
that.district=result.regeocode.addressComponent.district |
|||
if(that.city==""){ |
|||
that.city=that.province |
|||
} |
|||
console.log('that',that.province,that.city,that.district); |
|||
} else { |
|||
console.log("根据经纬度查询地址失败"); |
|||
// 搜索输入地区信息 |
|||
async initMap() { |
|||
if (!this.mapData) { |
|||
return; |
|||
} |
|||
}); |
|||
let mapPoi = this.mapData.split(","); |
|||
if (mapPoi.length < 2) { |
|||
this.center = [114.427999, 38.083779]; |
|||
this.zoom = 10; |
|||
return; |
|||
} |
|||
this.center = mapPoi; |
|||
this.zoom = 14; |
|||
this.position = mapPoi; |
|||
}, |
|||
//取消 |
|||
cancel() { |
|||
this.lng = ""; |
|||
this.lat = ""; |
|||
this.address = ""; |
|||
this.searchOption.city="" |
|||
// map.clearOverlays(); |
|||
}, |
|||
findlocation() { |
|||
// console.log('this.lng,this.lat,this.address',this.lng,this.lat,this.address); |
|||
this.locData.longitude=this.lng |
|||
this.locData.latitude=this.lat |
|||
this.locData.address=this.address |
|||
this.locData.province=this.province |
|||
this.locData.city=this.city |
|||
this.locData.district=this.district |
|||
this.$emit("findlocdata", this.locData); |
|||
this.lng = ""; |
|||
this.lat = ""; |
|||
this.address = ""; |
|||
this.searchOption.city="" |
|||
// map.clearOverlays(); |
|||
}, |
|||
|
|||
}; |
|||
</script> |
|||
|
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
/deep/ element.style{ |
|||
font-size: none !important; |
|||
} |
|||
/deep/.amap-copyright { |
|||
display: none !important; |
|||
} |
|||
/deep/.amap-logo { |
|||
display: none!important; |
|||
} |
|||
.search-box { |
|||
position: absolute; |
|||
top: 25px; |
|||
left: 20px; |
|||
} |
|||
.amap-page-container { |
|||
position: relative; |
|||
/* margin-bottom: 20px; */ |
|||
} |
|||
.footer { |
|||
margin-top: 10px; |
|||
text-align: center; |
|||
width: 600px; |
|||
} |
|||
.drawer-footer { |
|||
margin-top: 10px; |
|||
text-align: right; |
|||
position: relative; |
|||
border: 0; |
|||
} |
|||
.lineinput ivu-input-wrapper ivu-input-wrapper-default ivu-input-type-text ivu-input-wrapper-disabled{ |
|||
width: 100%!important; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.map-container { |
|||
width: 100%; |
|||
height: 500px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue