<!--
|
描述：拖放地图组件，默认尺寸是 500 * 300
|
|
接收属性参数：
|
lat: 纬度
|
lng: 经度
|
|
自定义事件：
|
drag: 拖放完成事件
|
|
示例：
|
<mapDrag @drag="dragMap" lat="22.574405" lng="114.095388"></mapDrag>
|
-->
|
<template>
|
<div class="m-map">
|
<div class="search">
|
<el-form @submit.native.prevent>
|
<input
|
:id="search_id"
|
v-model="input"
|
type="text"
|
placeholder="请输入关键字"
|
autocomplete="off"
|
>
|
<input type="text" style="display: none">
|
<button type="primary" @click="searchMap">搜索</button>
|
</el-form>
|
<div v-show="searchKey" id="js-result" class="result" />
|
</div>
|
<!-- <div id="panel" /> -->
|
<!-- 搜索结果栏 -->
|
<div v-if="showsearchResult" class="tool_search_result">
|
<ul>
|
<li
|
v-for="(item, index) in poiList"
|
:key="index"
|
@click="markerResult(item)"
|
>
|
{{ item.name }}
|
</li>
|
</ul>
|
</div>
|
<div id="js-container" class="map">正在加载数据 ...</div>
|
</div>
|
</template>
|
|
<script>
|
// import remoteLoad from '@/utils/remoteLoad.js'
|
import bus from '@/eventBus/eventBus.js'
|
// import { MapKey, securityJsCode } from '@/api/config'
|
import AMapLoader from '@amap/amap-jsapi-loader'
|
const MapKey = 'c477e250c63cde947d7e9072bdcf9e65'
|
const securityJsCode = '746ae93f3f20c7fc30134109bd55fd19'
|
export default {
|
props: {
|
lat: {
|
type: String,
|
default: ''
|
},
|
lng: {
|
type: String,
|
default: ''
|
}
|
},
|
data() {
|
return {
|
autoOptions: {
|
input: ''
|
},
|
showsearchResult: false,
|
search_id: 'searchId',
|
input: '',
|
searchPlaceInput: '',
|
searchKey: '',
|
placeSearch: null,
|
dragStatus: false,
|
AMapUI: null,
|
AMap: null,
|
positionImage: require('@/assets/icons/position.png'),
|
marker: {},
|
map: null,
|
poiList: []
|
}
|
},
|
watch: {
|
searchPlaceInput(newValue) {
|
if (newValue != null) {
|
// this.placeSearch.search(newValue)
|
}
|
}
|
},
|
created() {
|
bus.$on('share_id', val => {
|
this.autoOptions.input = val
|
})
|
bus.$on('share', val => {
|
this.searchPlaceInput = val
|
})
|
},
|
mounted() {
|
this.initMap()
|
this.sendId()
|
},
|
methods: {
|
sendMsg() {
|
bus.$emit('share', this.input)
|
},
|
sendId() {
|
bus.$emit('share_id', this.search_id)
|
},
|
// 实例化地图
|
initMap() {
|
window._AMapSecurityConfig = { securityJsCode }
|
AMapLoader.load({
|
key: MapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
|
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
plugins: ['AMap.ToolBar', 'AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.MapType', 'AMap.HawkEye', 'AMap.Scale', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
}).then((AMap) => {
|
this.map = new AMap.Map('js-container', { // 设置地图容器id
|
viewMode: '3D', // 是否为3D地图模式
|
zoom: 11, // 初始化地图级别
|
center: [117.279952, 31.850109] // 初始化地图中心点位置
|
})
|
this.map.addControl(new AMap.ToolBar())
|
this.mapOn(AMap)
|
}).catch(e => {
|
console.log(e)
|
})
|
},
|
searchMap() {
|
var placeSearch = new AMap.PlaceSearch({
|
// 构造地点查询类
|
pageSize: 30, // 单页显示结果条数
|
pageIndex: 1, // 页码
|
citylimit: false, // 是否强制限制在设置的城市内搜索
|
map: this.map, // 展现结果的地图实例
|
// panel: 'panel', // 结果列表将在此容器中进行展示。
|
autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
})
|
// 关键字查询
|
const cur = this
|
placeSearch.search(this.input, (status, result) => {
|
// 查询成功时，result即对应匹配的POI信息
|
console.log(status)
|
console.log(result)
|
if (status === 'complete' && result.info === 'OK') {
|
cur.showsearchResult = true
|
cur.poiList = result.poiList.pois
|
} else {
|
cur.showsearchResult = false
|
cur.poiList = []
|
cur.$message({
|
message: '没有查到结果',
|
type: 'warning'
|
})
|
}
|
})
|
},
|
markerResult(data) {
|
// this.input = data.name
|
// this.searchMap()
|
const that = this
|
const { lat, lng } = data.location
|
window._AMapSecurityConfig = { securityJsCode }
|
AMapLoader.load({
|
key: MapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
|
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
plugins: ['AMap.ToolBar', 'AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.MapType', 'AMap.HawkEye', 'AMap.Scale', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
}).then((AMap) => {
|
this.map = new AMap.Map('js-container', { // 设置地图容器id
|
viewMode: '3D', // 是否为3D地图模式
|
zoom: 18, // 初始化地图级别
|
center: [lng, lat] // 初始化地图中心点位置
|
})
|
this.map.addControl(new AMap.ToolBar())
|
const address = data.name
|
const marker = new AMap.Marker({
|
position: new AMap.LngLat(lng, lat),
|
icon: that.positionImage,
|
anchor: 'bottom-center'
|
})
|
// map.remove(that.marker)
|
this.map.add(marker)
|
that.marker = marker
|
that.showsearchResult = false
|
that.$emit('center', { lnglat: lng + ',' + lat, address })
|
this.mapOn(AMap)
|
}).catch(e => {
|
console.log(e)
|
})
|
// var marker = new AMap.Marker({
|
// position: [Number(data.location.lng), Number(data.location.lat)],
|
// cursor: 'pointer',
|
// // icon: carIcon,
|
// autoRotation: true,
|
// angle: 0,
|
// offset: new AMap.Pixel(-36, -30),
|
// })
|
// marker.setMap(this.mapall)
|
// this.mapall.setFitView();
|
},
|
// 地图事件监听
|
mapOn(AMap) {
|
const { map } = this
|
const that = this
|
const geocoder = new AMap.Geocoder()
|
let address = ''
|
// 监听地图点击事件
|
map.on('click', function(e) {
|
// 获取点击位置坐标
|
const { lat, lng } = e.lnglat
|
// 设置标记点
|
const marker = new AMap.Marker({
|
position: new AMap.LngLat(lng, lat),
|
icon: that.positionImage,
|
anchor: 'bottom-center'
|
})
|
map.remove(that.marker)
|
map.add(marker)
|
that.marker = marker
|
geocoder.getAddress([lng, lat], function(status, result) {
|
address = result.regeocode.formattedAddress
|
that.showsearchResult = false
|
that.$emit('center', { lng, lat, address })
|
})
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="css">
|
.m-map {
|
min-width: 500px;
|
min-height: 300px;
|
position: relative;
|
}
|
.m-map .map {
|
width: 100%;
|
height: 100%;
|
}
|
.m-map .search {
|
position: absolute;
|
top: 10px;
|
left: 10px;
|
width: 285px;
|
z-index: 1;
|
}
|
.m-map .search input {
|
width: 220px;
|
border: 1px solid #ccc;
|
height: 30px;
|
box-sizing: border-box;
|
line-height: 20px;
|
padding: 5px;
|
outline: none;
|
}
|
.m-map .search button {
|
line-height: 26px;
|
background: #fff;
|
border: 1px solid #ccc;
|
width: 50px;
|
text-align: center;
|
}
|
.m-map .result {
|
max-height: 300px;
|
overflow: auto;
|
margin-top: 10px;
|
}
|
#panel {
|
position: absolute;
|
top: 50px;
|
left: 10px;
|
width: 270px;
|
z-index: 1;
|
}
|
.tool_search_result {
|
position: absolute;
|
top: 40px;
|
left: 10px;
|
width: 270px;
|
height: 300px;
|
overflow: auto;
|
z-index: 1;
|
border: 1px solid rgb(175, 175, 173);
|
border-top: none;
|
background: #fff;
|
opacity: 0.8;
|
bottom: auto;
|
z-index: 12;
|
position: absolute;
|
text-align: left;
|
font-size: 14px;
|
|
}
|
.tool_search_result ul {
|
width: 100%;
|
list-style: none;
|
margin: 0;
|
padding: 0;
|
}
|
.tool_search_result ul li {
|
font-size: 12px;
|
cursor: pointer;
|
color: rgb(23, 40, 75);
|
text-align: center;
|
width: 100%;
|
line-height: 2;
|
padding: 5px 10px;
|
box-sizing: border-box;
|
border-bottom: 1px dashed rgb(170, 170, 172);
|
display: block;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
.tool_search_result ul li:last-child {
|
border: none;
|
}
|
</style>
|
