版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_24147051/article/details/84763265
(图一) 页面预览 :当前位置(红色 图标处)
(图二)页面预览: 文字设置 + 弹框设置
(图三) 搜索插件 + toolBar 插件
(图四) 时间轴插件
<template>
<div class="amap-page-container">
<!-- 搜索框 -->
<el-amap-search-box class="search-box"
:search-option="searchOption"
:on-search-result="onSearchResult">
</el-amap-search-box>
<el-amap
ref="map"
vid="amapDemo"
:center="center"
:map-manager="amapManager"
:zoom="zoom"
:plugin="plugin"
:events="events"
class="amap-demo">
<!-- 在地图上标记点 -->
<el-amap-marker
v-for="(marker,index) in markers"
:key="index"
:position="marker" >
</el-amap-marker>
<!-- 坐标点 -->
<el-amap-marker vid="amapDemo" :position="center"></el-amap-marker>
<el-amap-info-window
:position="currentWindow.position"
:content="currentWindow.content"
:visible="currentWindow.visible"
:events="currentWindow.events">
</el-amap-info-window>
<!-- 放置图片 -->
<el-amap-ground-image v-for="(groundimage,index) in groundimages"
:url="groundimage.url"
:key="index"
:bounds="groundimage.bounds"
:events="groundimage.events">
</el-amap-ground-image>
<!-- 文字 -->
<el-amap-text v-for="(text,index) in texts"
:text="text.text"
:key="index"
:offset="text.offset"
:position="text.position"
:events="text.events">
</el-amap-text>
<el-amap-text v-for="(text,index) in texts2"
:text="text.text"
:key="index"
:offset="text.offset"
:position="text.position"
:events="text.events">
</el-amap-text>
<el-amap-text v-for="(text,index) in texts3"
:text="text.text"
:key="index"
:offset="text.offset"
:position="text.position"
:events="text.events">
</el-amap-text>
</el-amap>
<!-- 点击地图的按钮 -->
<div class="toolbar">
<button @click="getMap()">获取地图信息</button>
<button @click="switchWindow(0)">展示第一个位置</button>
<button @click="switchWindow(1)">展示第二个位置</button>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
let amapManager = new VueAMap.AMapManager()
export default {
name: 'Gaode',
created () {
VueAMap.initAMapApiLoader({
key: '你的开发者key',
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation',
'AMapUI.loadUI', 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.PolyEditor', 'AMap.CircleEditor'],
uiVersion: '1.0.11' // 版本号
})
},
mounted () {
this.currentWindow = this.windows[1]// 初始化窗口信息
},
data: function () {
let me = this
me.city = me.city || '上海'
return {
zoom: 12,
center: [121.59996, 31.197646], // 中心位置
makerConf: {
position: [121.59996, 31.197646],
content: ''
},
amapManager,
events: {
init: (o) => {
// 将当前位置标记为A
AMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) {
const marker = new SimpleMarker({
iconLabel: 'A',
iconStyle: 'red',
map: o,
position: o.getCenter()
})
})
console.log('当前位置的坐标', o.getCenter())
console.log('方法', this.$refs.map.$$getInstance())
o.getCity(result => {
console.log(result)
})
},
'moveend': () => {
},
'zoomchange': () => {
},
'click': (e) => {
console.log(e)
this.center = [e.lnglat.lng, e.lnglat.lat]// 点击选择新地址为中心点
const msg = {
key: '3df604a614d7f0e325f79bb25cdee15c',
location: this.center.join()
}
// 获取当前地址
console.log(this, 'this')
this.$$.ajax({
url: 'https://restapi.amap.com/v3/geocode/regeo',
data: msg,
success: data => {
console.log(data)
let d = data.regeocode
if (d) {
this.address = d.formatted_address// 点击选择新地址并获取地址的名称
}
}
})
}
},
markers: [
[121.49996, 31.297646],
[121.40018, 31.197622],
[121.49991, 31.207649]
],
searchOption: {
city: '上海',
citylimit: true
},
mapCenter: [121.40996, 31.197646],
// ToolBar工具条插件、MapType插件、Scale比例尺插件、OverView鹰眼插件
plugin: ['ToolBar', {
pName: 'MapType',
defaultType: 0,
events: {
init (o) {
console.log(o)
}
}
}, {
pName: 'Scale',
events: {
init (instance) {
console.log(instance)
}
}
}, {
pName: 'OverView',
events: {
init (instance) {
console.log(instance)
}
}
}],
windows: [ // 窗口信息框
{
position: [121.69996, 31.237646],
content: `<img style="width:50px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543494665847&di=152e6f241b64580684a1c048ec9acd7e&imgtype=0&src=http%3A%2F%2Fp0.so.qhmsg.com%2Ft017668631465b251d5.gif"><p style="color:red">Hi! 马优晨,我在这里呢 !</p>`,
visible: true,
events: {
close () {
console.log('关闭窗口一!')
}
}
}, {
position: [121.5875285, 31.21515044],
content: '<img style="width:50px;" src="https://b305.photo.store.qq.com/psb?/V12aHQSq1CQ6SF/jfM4Tyeelt4v09alIPSOBkDqUCRgwqCHQKMs5iV4x3A!/b/dDEBAAAAAAAA&bo=wAMABQAAAAARB*Y!&rf=viewer_4"><p style="color:red">我在国际博览中心!</p>',
visible: true,
events: {
close () {
console.log('关闭窗口二!')
}
}
}
],
// 放置图片
groundimages: [
{
url: 'https://imedl.sogoucdn.com/cache/skins/uploadImage/2018/11/12/15420362056827_former.gif',
bounds: [[121.5273285, 31.21515044], [122.9273285, 32.31515044]],
events: {
click () {
alert('click groundimage')
}
}
}
],
// 放置文字
texts: [
{
position: [121.5273285, 31.27515044],
text: `<img style="width:50px;" src="http://imgsa.baidu.com/exp/w=500/sign=ce843cf58282b9013dadc333438ca97e/10dfa9ec8a13632763a8d5e1998fa0ec09fac79e.jpg"><p>探索宝藏的第一个线索!</p>`,
offset: [0, 0],
events: {
click: () => {
alert('click text')
}
}
}
],
// 放置文字
texts2: [
{
position: [121.6873285, 31.19515044],
text: '<img style="width:50px;" src="http://cdn.duitang.com/uploads/item/201501/10/20150110172950_aenAB.thumb.700_0.gif"><p>探索宝藏的第二个线索!</p>',
offset: [0, 0],
events: {
click: () => {
alert('click text')
}
}
}
],
// 放置文字
texts3: [
{
position: [121.6873285, 31.29515044],
text: '<img style="width:50px;" src="http://b-ssl.duitang.com/uploads/item/201710/05/20171005143631_5yZeJ.gif"><p>探索宝藏的第三个线索!</p>',
offset: [0, 0],
events: {
click: () => {
alert('click text')
}
}
}
],
slotWindow: {
position: [121.5163285, 31.21515044]
},
// 当前窗口
currentWindow: {
position: [0, 0],
content: '',
events: {},
visible: false
},
// 个人定义的地址
address: ''
}
},
methods: {
getMap () {
console.log(amapManager._componentMap)
console.log(amapManager._map)
},
// 切换信息窗口
switchWindow (tab) {
this.currentWindow.visible = false
this.$nextTick(() => {
this.currentWindow = this.windows[tab]
this.currentWindow.visible = true
})
},
// 在地图上添加标记的点
addMarker: function () {
let lng = 121.5 + Math.round(Math.random() * 1000) / 10000
let lat = 31.197646 + Math.round(Math.random() * 500) / 10000
this.markers.push([lng, lat])
},
// 搜索框输入
onSearchResult (pois) {
console.log(pois, '123456789')
let me = this
let latSum = 0
let lngSum = 0
if (pois.length > 0) {
var poi = pois[0]
let lng = poi['lng']
let lat = poi['lat']
me.center = [lng, lat]
me.makerConf.position = [lng, lat]
me.list = pois
pois.forEach(poi => {
let {lng, lat} = poi
lngSum += lng
latSum += lat
this.markers.push([poi.lng, poi.lat])
})
let center = {
lng: lngSum / pois.length,
lat: latSum / pois.length
}
this.mapCenter = [center.lng, center.lat]
}
}
}
}
</script>
<style scoped>
.amap-demo {
height: 1200px;
}
.search-box {
position: absolute;
top: 25px;
left: 70px;
}
.amap-page-container {
position: relative;
}
.toolbar button {
background: #42b983;
border: 0;
color: white;
padding: 8px;
margin: 0 5px;
border-radius: 3px;
cursor: pointer;
margin-top:10px;
}
</style>