153 lines
4.0 KiB
Vue
153 lines
4.0 KiB
Vue
<template>
|
||
<div class="m-map">
|
||
<div class="search" v-if="placeSearch">
|
||
<div id="js-result" v-show="searchKey" class="result"></div>
|
||
</div>
|
||
<div id="js-container" class="map">正在加载数据 ...</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import remoteLoad from '@/util/remoteLoad.js'
|
||
window._AMapSecurityConfig = {
|
||
securityJsCode: '4c7f32be1ae23595dd423fbdf337df3f'
|
||
}
|
||
// import { MapKey } from './config'
|
||
export default {
|
||
name: 'MapDrag',
|
||
props: {
|
||
searchKey: {
|
||
default: ''
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
// searchKey: "",
|
||
placeSearch: null,
|
||
dragStatus: false,
|
||
AMapUI: null,
|
||
AMap: null,
|
||
city: '',
|
||
geolocation: null
|
||
}
|
||
},
|
||
watch: {
|
||
searchKey () {
|
||
if (this.searchKey === '') {
|
||
this.placeSearch.clear()
|
||
}
|
||
}
|
||
},
|
||
async created () {
|
||
// 已载入高德地图API，则直接初始化地图
|
||
if (window.AMap && window.AMapUI) {
|
||
this.initMap()
|
||
// 未载入高德地图API，则先载入API再初始化
|
||
} else {
|
||
await remoteLoad('https://webapi.amap.com/maps?v=2.0&key=4b083a38fc17ad7c5e3df667931e0cf0')
|
||
await remoteLoad('https://webapi.amap.com/ui/1.1/main.js')
|
||
this.initMap()
|
||
}
|
||
},
|
||
methods: {
|
||
// 搜索
|
||
handleSearch () {
|
||
console.log(this.searchKey, '33333oooo')
|
||
if (this.searchKey) {
|
||
this.placeSearch.search(this.searchKey)
|
||
}
|
||
},
|
||
// 实例化地图
|
||
initMap () {
|
||
// 加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
|
||
const AMapUI = (this.AMapUI = window.AMapUI)
|
||
const AMap = (this.AMap = window.AMap)
|
||
|
||
const that = this
|
||
|
||
AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker) => {
|
||
const mapConfig = {
|
||
zoom: 16
|
||
}
|
||
const map = new AMap.Map('js-container', mapConfig)
|
||
// 获得当前定位的城市
|
||
AMap.plugin('AMap.CitySearch', function () {
|
||
const citySearch = new AMap.CitySearch()
|
||
console.log('citySearch', citySearch)
|
||
// 加载地图搜索插件
|
||
AMap.plugin('AMap.PlaceSearch', () => {
|
||
that.placeSearch = new AMap.PlaceSearch({
|
||
pageSize: 5,
|
||
pageIndex: 1,
|
||
citylimit: false,
|
||
map: map,
|
||
panel: 'js-result'
|
||
// city: that.city, // 设定搜索城市
|
||
})
|
||
AMap.Event.addListener(that.placeSearch, 'listElementClick', function (e) {
|
||
that.$emit('listElementClick', e)
|
||
})
|
||
AMap.Event.addListener(that.placeSearch, 'markerClick', function (e) {
|
||
that.$emit('listElementClick', e)
|
||
})
|
||
})
|
||
// citySearch.getLocalCity(function (status, result) {
|
||
// console.log('getLocalCity', status, result)
|
||
// if (status === 'complete' && result.info === 'OK') {
|
||
// // 查询成功，result即为当前所在城市信息
|
||
// that.city = result.adcode
|
||
// }
|
||
// })
|
||
})
|
||
// 启用工具条
|
||
AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation'], function () {
|
||
map.addControl(
|
||
new AMap.ToolBar({
|
||
position: 'RB'
|
||
})
|
||
)
|
||
map.addControl(
|
||
new AMap.Scale({
|
||
position: 'LB'
|
||
})
|
||
)
|
||
})
|
||
// 创建地图拖拽
|
||
const positionPicker = new PositionPicker({
|
||
mode: 'dragMap', // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
|
||
map: map // 依赖地图对象
|
||
})
|
||
|
||
// 启动拖放
|
||
positionPicker.start()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="css" scoped>
|
||
.m-map {
|
||
max-width: 700px;
|
||
max-height: 462px;
|
||
position: relative;
|
||
}
|
||
.m-map .map {
|
||
min-width: 700px;
|
||
min-height: 462px;
|
||
}
|
||
.m-map .search {
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 10px;
|
||
width: 285px;
|
||
z-index: 1;
|
||
}
|
||
|
||
.m-map .result {
|
||
max-height: 300px;
|
||
overflow: auto;
|
||
margin-top: 10px;
|
||
}
|
||
</style>
|