fengdong777
2 years ago
7 changed files with 114 additions and 337 deletions
@ -1,252 +1,75 @@ |
|||||
<template> |
<template> |
||||
<div class="amap-page-container" style="width: 600px; height:300px;margin:30px 10%;"> |
<div class="coord-picker"> |
||||
<el-amap-search-box |
<div class="map-container"> |
||||
class="search-box" |
<amap |
||||
:search-option="searchOption" |
cache-key="coord-picker-map" |
||||
:on-search-result="onSearchResult" |
mmap-style="amap://styles/whitesmoke" |
||||
></el-amap-search-box> |
async |
||||
<el-amap |
:center.sync="center" |
||||
ref="map" |
:zoom.sync="zoom" |
||||
:vid="workId" |
is-hotspot |
||||
:amap-manager="amapManager" |
|
||||
:center="center" |
|
||||
:zoom="zoom" |
|
||||
:plugin="plugin" |
|
||||
:events="events" |
|
||||
class="amap-demo" |
|
||||
> |
> |
||||
</el-amap> |
<amap-marker v-if="position" :position.sync="position" draggable /> |
||||
<!-- <p>{{ address }}</p> |
</amap> |
||||
<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> |
|
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
|
|
||||
</template> |
</template> |
||||
<script> |
<script> |
||||
import { AMapManager } from "vue-amap"; |
|
||||
let amapManager = new AMapManager(); |
|
||||
export default { |
export default { |
||||
props:{ |
props: { |
||||
workId:String |
timeStamp: { |
||||
}, |
type: Number, |
||||
data() { |
|
||||
const self = this; |
|
||||
return { |
|
||||
locData: { |
|
||||
longitude: "", |
|
||||
latitude: "", |
|
||||
address: "", |
|
||||
province:"", |
|
||||
city:"", |
|
||||
district:"" |
|
||||
}, |
}, |
||||
searchOption: { |
mapData: { |
||||
city: "",//搜索范围 |
type: String, |
||||
citylimit: false, //限制搜索范围 |
|
||||
//city: "", citylimit: false, // 不限制搜索范围搜索，比如想全国搜索 |
|
||||
}, |
}, |
||||
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(); |
data() { |
||||
if (!self.marker) { |
return { |
||||
self.marker = new AMap.Marker({ |
center: null, |
||||
position: e.lnglat, |
zoom: 10, |
||||
}); |
position: null, |
||||
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); |
|
||||
}, |
|
||||
}, |
}, |
||||
|
watch: { |
||||
|
timeStamp() { |
||||
|
this.center = [115.479646, 35.234309]; |
||||
|
this.zoom = 10; |
||||
|
this.position = null; |
||||
|
this.initMap(); |
||||
}, |
}, |
||||
], |
mapData() { |
||||
plugin: [ |
this.initMap(); |
||||
{ |
|
||||
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); |
|
||||
} |
|
||||
}); |
|
||||
}, |
}, |
||||
}, |
}, |
||||
}, |
created() { |
||||
], |
this.initMap(); |
||||
}; |
|
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
onSearchResult(pois) { |
// 搜索输入地区信息 |
||||
console.log('pois',pois); |
async initMap() { |
||||
if (pois.length > 0) { |
if (!this.mapData) { |
||||
let { lng, lat, name ,location} = pois[0]; |
return; |
||||
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("根据经纬度查询地址失败"); |
|
||||
} |
} |
||||
}); |
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); |
</script> |
||||
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(); |
|
||||
}, |
|
||||
|
|
||||
|
|
||||
}, |
<style lang="scss" scoped> |
||||
}; |
.map-container { |
||||
</script> |
width: 100%; |
||||
<style scoped> |
height: 500px; |
||||
/deep/ element.style{ |
} |
||||
font-size: none !important; |
</style> |
||||
} |
|
||||
/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> |
|
||||
Loading…
Reference in new issue