wangqing
4 years ago
4 changed files with 310 additions and 276 deletions
@ -1,35 +1,320 @@ |
|||
<template> |
|||
<div class="p-map"> |
|||
<div id="mapContainer"> |
|||
<!--渲染地图的div--> |
|||
</div> |
|||
<div> |
|||
<el-input ref="main" |
|||
v-model="address" |
|||
:clearable="disabled" |
|||
:disabled="disabled" |
|||
placeholder="请选择地址" |
|||
@clear="handleClear" |
|||
@focus="handleShow" |
|||
/> |
|||
|
|||
<el-dialog |
|||
:visible.sync="box" |
|||
append-to-body |
|||
title="选择位置" |
|||
width="80%" |
|||
@close="handleClose" |
|||
> |
|||
<div v-if="box"> |
|||
<el-input id="map__input" |
|||
v-model="formattedAddress" |
|||
class="input-map-content-input" |
|||
:readonly="disabled" |
|||
clearable |
|||
placeholder="输入关键字选取地点" |
|||
@clear="clear" |
|||
/> |
|||
<div> |
|||
<div id="map__container" |
|||
class="input-map-content-container" |
|||
tabindex="0" |
|||
/> |
|||
<div id="map__result" |
|||
class="input-map-content-result" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<span slot="footer" |
|||
class="dialog-footer" |
|||
> |
|||
<el-button v-if="!(disabled )" |
|||
icon="el-icon-check" |
|||
type="primary" |
|||
@click="handleSubmit" |
|||
>确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import MapLoader from '@/components/form/InputMap/amap.js' |
|||
import MapLoader from '@/components/form/InputMap/amap.js' |
|||
|
|||
export default { |
|||
name: 'Index', |
|||
created() { |
|||
this.loadMap() |
|||
name: 'InputMap', |
|||
props: { |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
formattedAddress: '', |
|||
address: '', |
|||
poi: {}, |
|||
text: '', |
|||
marker: null, |
|||
map: null, |
|||
box: false |
|||
} |
|||
}, |
|||
watch: { |
|||
poi(val) { |
|||
this.formattedAddress = val.formattedAddress |
|||
}, |
|||
value(val) { |
|||
if (!val) { |
|||
this.poi = {} |
|||
} |
|||
}, |
|||
text(val) { |
|||
if (val) { |
|||
this.poi = { |
|||
longitude: val[0], |
|||
latitude: val[1], |
|||
formattedAddress: val[2] |
|||
} |
|||
this.address = val[2] |
|||
} |
|||
}, |
|||
box: { |
|||
handler() { |
|||
if (this.box) { |
|||
this.$nextTick(() => |
|||
this.init(() => { |
|||
if (this.longitude && this.latitude) { |
|||
this.addMarker(this.longitude, this.latitude) |
|||
this.getAddress(this.longitude, this.latitude) |
|||
} |
|||
}) |
|||
) |
|||
} |
|||
}, |
|||
immediate: true |
|||
} |
|||
}, |
|||
methods: { |
|||
loadMap() { |
|||
const _this = this |
|||
MapLoader().then(AMap => { |
|||
console.log('地图加载成功') |
|||
this.map = new AMap.Map('mapContainer', { |
|||
center: [117.000923, 36.675807], |
|||
zoom: 6 |
|||
clear() { |
|||
this.poi = {} |
|||
this.clearMarker() |
|||
}, |
|||
handleSubmit() { |
|||
this.setVal() |
|||
this.box = false |
|||
}, |
|||
handleClear() { |
|||
this.text = [] |
|||
this.poi = {} |
|||
}, |
|||
setVal() { |
|||
this.text = [this.poi.longitude, this.poi.latitude, this.poi.formattedAddress] |
|||
}, |
|||
handleShow() { |
|||
this.$refs.main.blur() |
|||
this.box = true |
|||
}, |
|||
// 新增坐标 |
|||
addMarker(lng, lat) { |
|||
this.clearMarker() |
|||
this.marker = new window.AMap.Marker({ |
|||
position: [lng, lat] |
|||
}) |
|||
this.map.add(this.marker) |
|||
}, |
|||
// 清空坐标 |
|||
clearMarker() { |
|||
if (this.marker) { |
|||
this.map.remove(this.marker) |
|||
this.marker = null |
|||
} |
|||
}, |
|||
// 获取坐标 |
|||
getAddress(lng, lat) { |
|||
let that = this |
|||
window.AMap.plugin('AMap.Geocoder', function() { |
|||
// 回调函数 |
|||
let geocoder = new window.AMap.Geocoder({}) |
|||
geocoder.getAddress([lng, lat], (status, result) => { |
|||
if (status === 'complete' && result.info === 'OK') { |
|||
const regeocode = result.regeocode |
|||
that.poi = Object.assign(regeocode, { |
|||
longitude: lng, |
|||
latitude: lat |
|||
}) |
|||
// 自定义点标记内容 |
|||
that.clearMarker() |
|||
let content = `<div><img class="amap-marker-img" src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"> |
|||
<span class="input-map-marker">${that.poi.formattedAddress}</span></div>` |
|||
that.marker = new window.AMap.Marker({ |
|||
content: content, // 自定义点标记覆盖物内容 |
|||
position: [lng, lat], |
|||
title: that.poi.formattedAddress, |
|||
zoom: 13 |
|||
}) |
|||
that.map.add(that.marker) |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
// 获取当前位置 |
|||
getCurrentLocation() { |
|||
let that = this |
|||
window.AMap.plugin('AMap.Geolocation', function() { |
|||
let geolocation = new window.AMap.Geolocation({ |
|||
// 是否使用高精度定位，默认：true |
|||
enableHighAccuracy: true, |
|||
// 设置定位超时时间，默认：无穷大 |
|||
timeout: 10000, |
|||
// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20) |
|||
buttonOffset: new window.AMap.Pixel(10, 20), |
|||
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false |
|||
zoomToAccuracy: true, |
|||
// 定位按钮的排放位置, RB表示右下 |
|||
buttonPosition: 'RB' |
|||
}) |
|||
// map初始化插件 |
|||
AMap.plugin(['AMap.ToolBar'], function() { |
|||
_this.map.addControl(new AMap.ToolBar()) |
|||
|
|||
geolocation.getCurrentPosition(function(status, result) { |
|||
if (status == 'complete') { |
|||
onComplete(result) |
|||
} else { |
|||
onError(result) |
|||
} |
|||
}) |
|||
|
|||
function onComplete(data) { |
|||
// data是具体的定位信息 |
|||
console.log(data) |
|||
let {lng, lat} = data.position |
|||
that.getAddress(lng, lat) |
|||
} |
|||
|
|||
function onError(data) { |
|||
// 定位出错 |
|||
console.log(data) |
|||
} |
|||
}) |
|||
}, |
|||
handleClose() { |
|||
window.poiPicker.clearSearchResults() |
|||
}, |
|||
addClick() { |
|||
this.map.on('click', e => { |
|||
if (this.disabled) return |
|||
console.log(e) |
|||
const lnglat = e.lnglat |
|||
// 经度 |
|||
const lng = lnglat.lng |
|||
// 纬度 |
|||
const lat = lnglat.lat |
|||
this.addMarker(lng, lat) |
|||
this.getAddress(lng, lat) |
|||
}) |
|||
}, |
|||
init() { |
|||
MapLoader().then(AMap => { |
|||
console.log('地图加载成功') |
|||
this.map = new AMap.Map('map__container', Object.assign({ |
|||
zoom: 13, |
|||
// 自动定位到所在城市并显示 |
|||
resizeEnable: true, |
|||
center: (() => { |
|||
if (this.longitude && this.latitude) return [this.longitude, this.latitude] |
|||
})() |
|||
}, this.params)) |
|||
this.getCurrentLocation() |
|||
this.initPoip() |
|||
this.addClick() |
|||
}, e => { |
|||
console.log('地图加载失败', e) |
|||
}) |
|||
|
|||
}, |
|||
initPoip() { |
|||
// https://lbs.amap.com/api/amap-ui/reference-amap-ui/other/poipicker |
|||
if (!window.AMapUI) { |
|||
return |
|||
} |
|||
// 加载PoiPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分 |
|||
window.AMapUI.loadUI(['misc/PoiPicker'], PoiPicker => { |
|||
var poiPicker = new PoiPicker({ |
|||
input: 'map__input', |
|||
placeSearchOptions: { |
|||
map: this.map, |
|||
pageSize: 10 |
|||
}, |
|||
searchResultsContainer: 'map__result' |
|||
}) |
|||
// 初始化poiPicker |
|||
this.poiPickerReady(poiPicker) |
|||
}) |
|||
}, |
|||
poiPickerReady(poiPicker) { |
|||
window.poiPicker = poiPicker |
|||
// 选取了某个POI |
|||
poiPicker.on('poiPicked', poiResult => { |
|||
this.clearMarker() |
|||
let source = poiResult.source, |
|||
poi = poiResult.item |
|||
console.log(poiResult) |
|||
this.poi = Object.assign(poi, { |
|||
formattedAddress: poi.name, |
|||
longitude: poi.location.lng, |
|||
latitude: poi.location.lat |
|||
}) |
|||
|
|||
if (source !== 'search') { |
|||
poiPicker.searchByKeyword(poi.name) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
|
|||
::v-deep .amap-marker-img { |
|||
width: 25px !important; |
|||
height: 34px !important; |
|||
} |
|||
::v-deep .input-map-marker { |
|||
position: absolute !important; |
|||
top: -20px !important; |
|||
right: -118px !important; |
|||
color: #fff !important; |
|||
padding: 4px 10px !important; |
|||
-webkit-box-shadow: 1px 1px 1px rgba(10, 10, 10, 0.2); |
|||
box-shadow: 1px 1px 1px rgba(10, 10, 10, 0.2); |
|||
white-space: nowrap; |
|||
font-size: 12px; |
|||
background-color: #25a5f7 !important; |
|||
border-radius: 3px; |
|||
} |
|||
.input-map-content-container { |
|||
width: 100%; |
|||
height: 450px; |
|||
} |
|||
.input-map-content-result { |
|||
display: block !important; |
|||
position: absolute; |
|||
top: 0; |
|||
right: -8px; |
|||
width: 250px; |
|||
height: 450px; |
|||
overflow-y: auto; |
|||
} |
|||
.input-map-content-input { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
@ -1,253 +0,0 @@ |
|||
<!--<template>--> |
|||
<!-- <div :class="b()">--> |
|||
<!-- <el-input ref="main"--> |
|||
<!-- v-model="address"--> |
|||
<!-- :size="size"--> |
|||
<!-- :clearable="disabled?false:clearable"--> |
|||
<!-- :disabled="disabled"--> |
|||
<!-- :placeholder="placeholder"--> |
|||
<!-- @clear="handleClear"--> |
|||
<!-- @focus="handleShow"--> |
|||
<!-- @click.native="handleClick"--> |
|||
<!-- />--> |
|||
|
|||
<!-- <el-dialog class="avue-dialog"--> |
|||
<!-- width="80%"--> |
|||
<!-- append-to-body--> |
|||
<!-- :title="placeholder"--> |
|||
<!-- :visible.sync="box"--> |
|||
<!-- @close="handleClose"--> |
|||
<!-- >--> |
|||
<!-- <div v-if="box"--> |
|||
<!-- :class="b('content')"--> |
|||
<!-- >--> |
|||
<!-- <el-input id="map__input"--> |
|||
<!-- v-model="formattedAddress"--> |
|||
<!-- :class="b('content-input')"--> |
|||
<!-- :size="size"--> |
|||
<!-- :readonly="disabled"--> |
|||
<!-- clearable--> |
|||
<!-- placeholder="输入关键字选取地点"--> |
|||
<!-- @clear="clear"--> |
|||
<!-- />--> |
|||
<!-- <div :class="b('content-box')">--> |
|||
<!-- <div id="map__container"--> |
|||
<!-- :class="b('content-container')"--> |
|||
<!-- tabindex="0"--> |
|||
<!-- />--> |
|||
<!-- <div id="map__result"--> |
|||
<!-- :class="b('content-result')"--> |
|||
<!-- />--> |
|||
<!-- </div>--> |
|||
<!-- </div>--> |
|||
<!-- <span slot="footer"--> |
|||
<!-- class="dialog-footer"--> |
|||
<!-- >--> |
|||
<!-- <el-button v-if="!(disabled || readonly)"--> |
|||
<!-- type="primary"--> |
|||
<!-- :size="size"--> |
|||
<!-- icon="el-icon-check"--> |
|||
<!-- @click="handleSubmit"--> |
|||
<!-- >确 定</el-button>--> |
|||
<!-- </span>--> |
|||
<!-- </el-dialog>--> |
|||
<!-- </div>--> |
|||
<!--</template>--> |
|||
<!--<script>--> |
|||
<!--import packages from 'core/packages'--> |
|||
<!--import create from 'core/create'--> |
|||
<!--import props from '../../core/common/props.js'--> |
|||
<!--import event from '../../core/common/event.js'--> |
|||
<!--export default create({--> |
|||
<!-- name: 'input-map',--> |
|||
<!-- mixins: [props(), event()],--> |
|||
<!-- data() {--> |
|||
<!-- return {--> |
|||
<!-- formattedAddress: '',--> |
|||
<!-- address: '',--> |
|||
<!-- poi: {},--> |
|||
<!-- marker: null,--> |
|||
<!-- map: null,--> |
|||
<!-- box: false--> |
|||
<!-- }--> |
|||
<!-- },--> |
|||
<!-- watch: {--> |
|||
<!-- poi(val) {--> |
|||
<!-- this.formattedAddress = val.formattedAddress--> |
|||
<!-- },--> |
|||
<!-- value(val) {--> |
|||
<!-- if (this.validatenull(val)) {--> |
|||
<!-- this.poi = {}--> |
|||
<!-- }--> |
|||
<!-- },--> |
|||
<!-- text(val) {--> |
|||
<!-- if (!this.validatenull(val)) {--> |
|||
<!-- this.poi = {--> |
|||
<!-- longitude: val[0],--> |
|||
<!-- latitude: val[1],--> |
|||
<!-- formattedAddress: val[2]--> |
|||
<!-- }--> |
|||
<!-- this.address = val[2]--> |
|||
<!-- }--> |
|||
<!-- },--> |
|||
<!-- box: {--> |
|||
<!-- handler() {--> |
|||
<!-- if (this.box) {--> |
|||
<!-- this.$nextTick(() =>--> |
|||
<!-- this.init(() => {--> |
|||
<!-- if (this.longitude && this.latitude) {--> |
|||
<!-- this.addMarker(this.longitude, this.latitude)--> |
|||
<!-- this.getAddress(this.longitude, this.latitude)--> |
|||
<!-- }--> |
|||
<!-- })--> |
|||
<!-- )--> |
|||
<!-- }--> |
|||
<!-- },--> |
|||
<!-- immediate: true--> |
|||
<!-- }--> |
|||
<!-- },--> |
|||
<!-- computed: {--> |
|||
<!-- longitude() {--> |
|||
<!-- return this.text[0]--> |
|||
<!-- },--> |
|||
<!-- latitude() {--> |
|||
<!-- return this.text[1]--> |
|||
<!-- },--> |
|||
<!-- title() {--> |
|||
<!-- return (this.disabled || this.readonly) ? '查看' : '选择'--> |
|||
<!-- }--> |
|||
<!-- },--> |
|||
<!-- methods: {--> |
|||
<!-- clear() {--> |
|||
<!-- this.poi = {}--> |
|||
<!-- this.clearMarker()--> |
|||
<!-- },--> |
|||
<!-- handleSubmit() {--> |
|||
<!-- this.setVal()--> |
|||
<!-- this.box = false--> |
|||
<!-- },--> |
|||
<!-- handleClear() {--> |
|||
<!-- this.text = []--> |
|||
<!-- this.poi = {}--> |
|||
<!-- this.handleChange(this.text)--> |
|||
<!-- },--> |
|||
<!-- setVal() {--> |
|||
<!-- this.text = [this.poi.longitude, this.poi.latitude, this.poi.formattedAddress]--> |
|||
<!-- this.handleChange(this.text)--> |
|||
<!-- },--> |
|||
<!-- handleShow() {--> |
|||
<!-- this.$refs.main.blur()--> |
|||
<!-- this.box = true--> |
|||
<!-- },--> |
|||
<!-- // 新增坐标--> |
|||
<!-- addMarker(R, P) {--> |
|||
<!-- this.clearMarker()--> |
|||
<!-- this.marker = new window.AMap.Marker({--> |
|||
<!-- position: [R, P]--> |
|||
<!-- })--> |
|||
<!-- this.marker.setMap(this.map)--> |
|||
<!-- },--> |
|||
<!-- // 清空坐标--> |
|||
<!-- clearMarker() {--> |
|||
<!-- if (this.marker) {--> |
|||
<!-- this.marker.setMap(null)--> |
|||
<!-- this.marker = null--> |
|||
<!-- }--> |
|||
<!-- },--> |
|||
<!-- // 获取坐标--> |
|||
<!-- getAddress(R, P) {--> |
|||
<!-- new window.AMap.service('AMap.Geocoder', () => {--> |
|||
<!-- // 回调函数--> |
|||
<!-- let geocoder = new window.AMap.Geocoder({})--> |
|||
<!-- geocoder.getAddress([R, P], (status, result) => {--> |
|||
<!-- if (status === 'complete' && result.info === 'OK') {--> |
|||
<!-- const regeocode = result.regeocode--> |
|||
<!-- this.poi = Object.assign(regeocode, {--> |
|||
<!-- longitude: R,--> |
|||
<!-- latitude: P--> |
|||
<!-- })--> |
|||
<!-- // 自定义点标记内容--> |
|||
<!-- var markerContent = document.createElement('div')--> |
|||
|
|||
<!-- // 点标记中的图标--> |
|||
<!-- var markerImg = document.createElement('img')--> |
|||
<!-- markerImg.src =--> |
|||
<!-- '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'--> |
|||
<!-- markerContent.appendChild(markerImg)--> |
|||
|
|||
<!-- // 点标记中的文本--> |
|||
<!-- var markerSpan = document.createElement('span')--> |
|||
<!-- markerSpan.className = 'avue-input-map__marker'--> |
|||
<!-- markerSpan.innerHTML = this.poi.formattedAddress--> |
|||
<!-- markerContent.appendChild(markerSpan)--> |
|||
<!-- this.marker.setContent(markerContent) // 更新点标记内容--> |
|||
<!-- }--> |
|||
<!-- })--> |
|||
<!-- })--> |
|||
<!-- },--> |
|||
<!-- handleClose() {--> |
|||
<!-- window.poiPicker.clearSearchResults()--> |
|||
<!-- },--> |
|||
<!-- addClick() {--> |
|||
<!-- this.map.on('click', e => {--> |
|||
<!-- if (this.disabled || this.readonly) return--> |
|||
<!-- const lnglat = e.lnglat--> |
|||
<!-- const P = lnglat.P || lnglat.Q--> |
|||
<!-- const R = lnglat.R--> |
|||
<!-- this.addMarker(R, P)--> |
|||
<!-- this.getAddress(R, P)--> |
|||
<!-- })--> |
|||
<!-- },--> |
|||
<!-- init(callback) {--> |
|||
<!-- if (!window.AMap) {--> |
|||
<!-- packages.logs('Map')--> |
|||
<!-- return--> |
|||
<!-- }--> |
|||
<!-- this.map = new window.AMap.Map('map__container', Object.assign({--> |
|||
<!-- zoom: 13,--> |
|||
<!-- center: (() => {--> |
|||
<!-- if (this.longitude && this.latitude) return [this.longitude, this.latitude]--> |
|||
<!-- })()--> |
|||
<!-- }, this.params))--> |
|||
<!-- this.initPoip()--> |
|||
<!-- this.addClick()--> |
|||
<!-- callback()--> |
|||
<!-- },--> |
|||
<!-- initPoip() {--> |
|||
<!-- if (!window.AMapUI) {--> |
|||
<!-- packages.logs('MapUi')--> |
|||
<!-- return--> |
|||
<!-- }--> |
|||
<!-- window.AMapUI.loadUI(['misc/PoiPicker'], PoiPicker => {--> |
|||
<!-- var poiPicker = new PoiPicker({--> |
|||
<!-- input: 'map__input',--> |
|||
<!-- placeSearchOptions: {--> |
|||
<!-- map: this.map,--> |
|||
<!-- pageSize: 10--> |
|||
<!-- },--> |
|||
<!-- searchResultsContainer: 'map__result'--> |
|||
<!-- })--> |
|||
<!-- // 初始化poiPicker--> |
|||
<!-- this.poiPickerReady(poiPicker)--> |
|||
<!-- })--> |
|||
<!-- },--> |
|||
<!-- poiPickerReady(poiPicker) {--> |
|||
<!-- window.poiPicker = poiPicker--> |
|||
<!-- // 选取了某个POI--> |
|||
<!-- poiPicker.on('poiPicked', poiResult => {--> |
|||
<!-- this.clearMarker()--> |
|||
<!-- var source = poiResult.source,--> |
|||
<!-- poi = poiResult.item--> |
|||
<!-- this.poi = Object.assign(poi, {--> |
|||
<!-- formattedAddress: poi.name,--> |
|||
<!-- longitude: poi.location.R,--> |
|||
<!-- latitude: poi.location.P || poi.location.Q--> |
|||
<!-- })--> |
|||
<!-- if (source !== 'search') {--> |
|||
<!-- poiPicker.searchByKeyword(poi.name)--> |
|||
<!-- }--> |
|||
<!-- })--> |
|||
<!-- }--> |
|||
<!-- }--> |
|||
<!--})--> |
|||
<!--</script>--> |
|||
Loading…
Reference in new issue