1
This commit is contained in:
fengdong777
@@ -1,224 +1,224 @@
|
||||
<template>
|
||||
<el-dialog top="5vh" :append-to-body="true" title="获取地图坐标" :visible.sync="dialogVisible" :before-close="handleClose" width="1000px">
|
||||
<div class="amap-page-container">
|
||||
<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" />
|
||||
<div class="toolbar">
|
||||
<span>当前坐标: {{ lng }}, {{ lat }}</span>
|
||||
<span>地址: {{ address }}</span>
|
||||
<el-button type="primary" @click="select" class="btn">确定</el-button>
|
||||
|
||||
</div>
|
||||
<el-amap
|
||||
class="amap-demo"
|
||||
vid="amapDemo2"
|
||||
:zoom="zoom"
|
||||
:center="mapCenter"
|
||||
:events="events"
|
||||
:plugin="plugin"
|
||||
>
|
||||
<el-amap-marker v-for="(marker,index) in markers"
|
||||
:key="index"
|
||||
:position="marker"
|
||||
:events="markerEvents"
|
||||
/>
|
||||
<!-- <el-amap-marker v-for="marker in markers" :position="marker" /> -->
|
||||
</el-amap>
|
||||
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { AMapManager } from 'vue-amap'
|
||||
export default {
|
||||
name: 'AmapPage',
|
||||
props: {
|
||||
dialogVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
address:{
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
makerPosition: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
const self = this
|
||||
return {
|
||||
zoom: 14,
|
||||
mapCenter: [114.508905, 38.004099],
|
||||
searchOption: {
|
||||
city: '石家庄',
|
||||
citylimit: false
|
||||
},
|
||||
lng: 0,
|
||||
lat: 0,
|
||||
loaded: false,
|
||||
plugin: [{
|
||||
pName: 'Geolocation',
|
||||
resizeEnable: true, //是否使用高精度定位，默认:true
|
||||
timeout: 100, //超过10秒后停止定位，默认：无穷大
|
||||
events: {
|
||||
init(o) {
|
||||
// o 是高德地图定位插件实例
|
||||
o.getCurrentPosition((status, result) => {
|
||||
if (result && result.position) {
|
||||
if (self.makerPosition.length == 0) {
|
||||
self.$emit('update:address', result.formattedAddress)
|
||||
// 设置经度
|
||||
self.lng = result.position.lng;
|
||||
// 设置维度
|
||||
self.lat = result.position.lat;
|
||||
// 设置坐标
|
||||
self.mapCenter = [self.lng, self.lat];
|
||||
}else{
|
||||
let maker = self.makerPosition.split(",")
|
||||
self.lng = maker[0]
|
||||
self.lat = maker[1]
|
||||
}
|
||||
// load
|
||||
self.loaded = true
|
||||
// 页面渲染好后
|
||||
self.$nextTick()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
events: {
|
||||
click(e) {
|
||||
const { lng, lat } = e.lnglat
|
||||
self.lng = lng
|
||||
self.lat = lat
|
||||
self.markers[0] = [lng, lat]
|
||||
|
||||
// 这里通过高德 SDK 完成。
|
||||
var geocoder = new AMap.Geocoder({
|
||||
radius: 1000,
|
||||
extensions: 'all'
|
||||
})
|
||||
geocoder.getAddress([lng, lat], function(status, result) {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
if (result && result.regeocode) {
|
||||
let addressComponent = result.regeocode.addressComponent
|
||||
let address = addressComponent.province + addressComponent.city + addressComponent.district + addressComponent.street + addressComponent.streetNumber
|
||||
self.$emit('update:address', address)
|
||||
self.$nextTick()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
markerEvents:{ // marker点点击事件
|
||||
click: e => {
|
||||
const { lng, lat } = e.lnglat
|
||||
self.lng = lng
|
||||
self.lat = lat
|
||||
// self.markers[0] = [lng, lat]
|
||||
|
||||
// 这里通过高德 SDK 完成。
|
||||
var geocoder = new AMap.Geocoder({
|
||||
radius: 1000,
|
||||
extensions: 'all'
|
||||
})
|
||||
geocoder.getAddress([lng, lat], function(status, result) {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
if (result && result.regeocode) {
|
||||
let addressComponent = result.regeocode.addressComponent
|
||||
let address = addressComponent.province + addressComponent.city + addressComponent.district + addressComponent.street + addressComponent.streetNumber
|
||||
self.$emit('update:address', address)
|
||||
self.$nextTick()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
markers: {
|
||||
get: function () {
|
||||
return [[this.lng, this.lat]]
|
||||
},
|
||||
set: function (newValue) {
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSearchResult(pois) {
|
||||
let latSum = 0
|
||||
let lngSum = 0
|
||||
let _self = this
|
||||
this.markers = []
|
||||
if (pois.length > 0) {
|
||||
const { lng, lat } = pois[0]
|
||||
_self.lng = lng
|
||||
_self.lat = lat
|
||||
_self.mapCenter = [lng, lat];
|
||||
|
||||
// 这里通过高德 SDK 完成。
|
||||
var geocoder = new AMap.Geocoder({
|
||||
radius: 1000,
|
||||
extensions: 'all'
|
||||
})
|
||||
geocoder.getAddress([lng, lat], (status, result) => {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
if (result && result.regeocode) {
|
||||
let addressComponent = result.regeocode.addressComponent
|
||||
let address = addressComponent.province + addressComponent.city + addressComponent.district + addressComponent.street + addressComponent.streetNumber
|
||||
_self.$emit('update:address', address)
|
||||
_self.$nextTick()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$emit('update:dialogVisible', false)
|
||||
this.$nextTick(() => {
|
||||
done()
|
||||
})
|
||||
},
|
||||
select() {
|
||||
this.$emit('update:dialogVisible', false)
|
||||
this.$emit('update:makerPosition', this.markers[0].toString())
|
||||
this.$emit('update:address', this.address)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.amap-demo {
|
||||
height: 450px;
|
||||
}
|
||||
.search-box {
|
||||
z-index: 999;
|
||||
margin-bottom: 20px;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 100px;
|
||||
}
|
||||
.amap-page-container {
|
||||
position: relative;
|
||||
}
|
||||
.toolbar{
|
||||
padding-bottom: 10px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
position: relative;
|
||||
.btn{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
span{
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<el-dialog top="5vh" :append-to-body="true" title="获取地图坐标" :visible.sync="dialogVisible" :before-close="handleClose" width="1000px">
|
||||
<div class="amap-page-container">
|
||||
<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" />
|
||||
<div class="toolbar">
|
||||
<span>当前坐标: {{ lng }}, {{ lat }}</span>
|
||||
<span>地址: {{ address }}</span>
|
||||
<el-button type="primary" @click="select" class="btn">确定</el-button>
|
||||
|
||||
</div>
|
||||
<el-amap
|
||||
class="amap-demo"
|
||||
vid="amapDemo2"
|
||||
:zoom="zoom"
|
||||
:center="mapCenter"
|
||||
:events="events"
|
||||
:plugin="plugin"
|
||||
>
|
||||
<el-amap-marker v-for="(marker,index) in markers"
|
||||
:key="index"
|
||||
:position="marker"
|
||||
:events="markerEvents"
|
||||
/>
|
||||
<!-- <el-amap-marker v-for="marker in markers" :position="marker" /> -->
|
||||
</el-amap>
|
||||
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { AMapManager } from 'vue-amap'
|
||||
export default {
|
||||
name: 'AmapPage',
|
||||
props: {
|
||||
dialogVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
address:{
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
makerPosition: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
const self = this
|
||||
return {
|
||||
zoom: 14,
|
||||
mapCenter: [114.508905, 38.004099],
|
||||
searchOption: {
|
||||
city: '石家庄',
|
||||
citylimit: false
|
||||
},
|
||||
lng: 0,
|
||||
lat: 0,
|
||||
loaded: false,
|
||||
plugin: [{
|
||||
pName: 'Geolocation',
|
||||
resizeEnable: true, //是否使用高精度定位，默认:true
|
||||
timeout: 100, //超过10秒后停止定位，默认：无穷大
|
||||
events: {
|
||||
init(o) {
|
||||
// o 是高德地图定位插件实例
|
||||
o.getCurrentPosition((status, result) => {
|
||||
if (result && result.position) {
|
||||
if (self.makerPosition.length == 0) {
|
||||
self.$emit('update:address', result.formattedAddress)
|
||||
// 设置经度
|
||||
self.lng = result.position.lng;
|
||||
// 设置维度
|
||||
self.lat = result.position.lat;
|
||||
// 设置坐标
|
||||
self.mapCenter = [self.lng, self.lat];
|
||||
}else{
|
||||
let maker = self.makerPosition.split(",")
|
||||
self.lng = maker[0]
|
||||
self.lat = maker[1]
|
||||
}
|
||||
// load
|
||||
self.loaded = true
|
||||
// 页面渲染好后
|
||||
self.$nextTick()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
events: {
|
||||
click(e) {
|
||||
const { lng, lat } = e.lnglat
|
||||
self.lng = lng
|
||||
self.lat = lat
|
||||
self.markers[0] = [lng, lat]
|
||||
|
||||
// 这里通过高德 SDK 完成。
|
||||
var geocoder = new AMap.Geocoder({
|
||||
radius: 1000,
|
||||
extensions: 'all'
|
||||
})
|
||||
geocoder.getAddress([lng, lat], function(status, result) {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
if (result && result.regeocode) {
|
||||
let addressComponent = result.regeocode.addressComponent
|
||||
let address = addressComponent.province + addressComponent.city + addressComponent.district + addressComponent.street + addressComponent.streetNumber
|
||||
self.$emit('update:address', address)
|
||||
self.$nextTick()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
markerEvents:{ // marker点点击事件
|
||||
click: e => {
|
||||
const { lng, lat } = e.lnglat
|
||||
self.lng = lng
|
||||
self.lat = lat
|
||||
// self.markers[0] = [lng, lat]
|
||||
|
||||
// 这里通过高德 SDK 完成。
|
||||
var geocoder = new AMap.Geocoder({
|
||||
radius: 1000,
|
||||
extensions: 'all'
|
||||
})
|
||||
geocoder.getAddress([lng, lat], function(status, result) {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
if (result && result.regeocode) {
|
||||
let addressComponent = result.regeocode.addressComponent
|
||||
let address = addressComponent.province + addressComponent.city + addressComponent.district + addressComponent.street + addressComponent.streetNumber
|
||||
self.$emit('update:address', address)
|
||||
self.$nextTick()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
markers: {
|
||||
get: function () {
|
||||
return [[this.lng, this.lat]]
|
||||
},
|
||||
set: function (newValue) {
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSearchResult(pois) {
|
||||
let latSum = 0
|
||||
let lngSum = 0
|
||||
let _self = this
|
||||
this.markers = []
|
||||
if (pois.length > 0) {
|
||||
const { lng, lat } = pois[0]
|
||||
_self.lng = lng
|
||||
_self.lat = lat
|
||||
_self.mapCenter = [lng, lat];
|
||||
|
||||
// 这里通过高德 SDK 完成。
|
||||
var geocoder = new AMap.Geocoder({
|
||||
radius: 1000,
|
||||
extensions: 'all'
|
||||
})
|
||||
geocoder.getAddress([lng, lat], (status, result) => {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
if (result && result.regeocode) {
|
||||
let addressComponent = result.regeocode.addressComponent
|
||||
let address = addressComponent.province + addressComponent.city + addressComponent.district + addressComponent.street + addressComponent.streetNumber
|
||||
_self.$emit('update:address', address)
|
||||
_self.$nextTick()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$emit('update:dialogVisible', false)
|
||||
this.$nextTick(() => {
|
||||
done()
|
||||
})
|
||||
},
|
||||
select() {
|
||||
this.$emit('update:dialogVisible', false)
|
||||
this.$emit('update:makerPosition', this.markers[0].toString())
|
||||
this.$emit('update:address', this.address)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.amap-demo {
|
||||
height: 450px;
|
||||
}
|
||||
.search-box {
|
||||
z-index: 999;
|
||||
margin-bottom: 20px;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 100px;
|
||||
}
|
||||
.amap-page-container {
|
||||
position: relative;
|
||||
}
|
||||
.toolbar{
|
||||
padding-bottom: 10px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
position: relative;
|
||||
.btn{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
span{
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user