# up map2
This commit is contained in:
xianfuxing
parent
328f5289d8
commit
6060fcd0d6
|
|
@ -10,6 +10,7 @@ export default {
|
|||
name: 'map2',
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
flag: false,
|
||||
defaultPositions: [
|
||||
{
|
||||
|
|
@ -29,8 +30,8 @@ export default {
|
|||
position: [114.124105, 22.401088]
|
||||
},
|
||||
{
|
||||
title: '恒生管理学院',
|
||||
position: [114.223565, 22.380771]
|
||||
title: '西贡郊野公园',
|
||||
position: [114.370966, 22.411628]
|
||||
},
|
||||
{
|
||||
title: '盐田',
|
||||
|
|
@ -45,26 +46,87 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
initMap() {
|
||||
const map = new AMap.Map('map-container', {
|
||||
this.map = new AMap.Map('map-container', {
|
||||
center: [114.143472, 22.284105],
|
||||
resizeEnable: true,
|
||||
zoom: 10
|
||||
})
|
||||
// 测试数据
|
||||
// 窗体信息
|
||||
// const infoWindow = new AMap.InfoWindow({
|
||||
// isCustom: true,
|
||||
// content: this.createInfoWindow(title, content.join("<br/>")),
|
||||
// offset: new AMap.Pixel(16, -45)
|
||||
// })
|
||||
// 标记点测试数据
|
||||
const markers = []
|
||||
this.defaultPositions.forEach((item, index) => {
|
||||
const marker = new AMap.Marker({
|
||||
position: item.position,
|
||||
zIndex: 10,
|
||||
title: item.title,
|
||||
map: map
|
||||
map: this.map
|
||||
})
|
||||
AMap.event.addListener(marker, 'click', () => {
|
||||
infoWindow.open(this.map, marker.getPosition())
|
||||
})
|
||||
markers.push(marker)
|
||||
})
|
||||
AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
|
||||
map.addControl(new AMap.ToolBar())
|
||||
map.addControl(new AMap.Scale())
|
||||
this.map.addControl(new AMap.ToolBar())
|
||||
this.map.addControl(new AMap.Scale())
|
||||
})
|
||||
// 实例化信息窗体
|
||||
const title = '方恒假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>'
|
||||
const content = []
|
||||
content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里")
|
||||
content.push('电话：010-64733333')
|
||||
content.push("<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>")
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
isCustom: true,
|
||||
content: this.createInfoWindow(title, content.join('<br/>')),
|
||||
offset: new AMap.Pixel(16, -45)
|
||||
})
|
||||
},
|
||||
createInfoWindow(title, content) {
|
||||
const info = document.createElement('div')
|
||||
info.className = 'info'
|
||||
|
||||
// 可以通过下面的方式修改自定义窗体的宽高
|
||||
// info.style.width = "400px"
|
||||
// 定义顶部标题
|
||||
const top = document.createElement('div')
|
||||
const titleD = document.createElement('div')
|
||||
const closeX = document.createElement('img')
|
||||
top.className = 'info-top'
|
||||
titleD.innerHTML = title
|
||||
closeX.src = 'https://webapi.amap.com/images/close2.gif'
|
||||
closeX.onclick = this.closeInfoWindow
|
||||
|
||||
top.appendChild(titleD)
|
||||
top.appendChild(closeX)
|
||||
info.appendChild(top)
|
||||
|
||||
// 定义中部内容
|
||||
const middle = document.createElement('div')
|
||||
middle.className = 'info-middle'
|
||||
middle.style.backgroundColor = 'white'
|
||||
middle.innerHTML = content
|
||||
info.appendChild(middle)
|
||||
|
||||
// 定义底部内容
|
||||
const bottom = document.createElement('div')
|
||||
bottom.className = 'info-bottom'
|
||||
bottom.style.position = 'relative'
|
||||
bottom.style.top = '0px'
|
||||
bottom.style.margin = '0 auto'
|
||||
const sharp = document.createElement('img')
|
||||
sharp.src = 'https://webapi.amap.com/images/sharp.png'
|
||||
bottom.appendChild(sharp)
|
||||
info.appendChild(bottom)
|
||||
return info
|
||||
},
|
||||
closeInfoWindow() {
|
||||
this.map.clearInfoWindow()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -73,11 +135,61 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="css">
|
||||
#map-container {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.info {
|
||||
border: solid 1px silver;
|
||||
}
|
||||
div.info-top {
|
||||
position: relative;
|
||||
background: none repeat scroll 0 0 #F9F9F9;
|
||||
border-bottom: 1px solid #CCC;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
div.info-top div {
|
||||
display: inline-block;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 31px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
div.info-top img {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
transition-duration: 0.25s;
|
||||
}
|
||||
div.info-top img:hover {
|
||||
box-shadow: 0px 0px 5px #000;
|
||||
}
|
||||
div.info-middle {
|
||||
font-size: 12px;
|
||||
padding: 6px;
|
||||
line-height: 20px;
|
||||
}
|
||||
div.info-bottom {
|
||||
height: 0px;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
div.info-bottom img {
|
||||
position: relative;
|
||||
z-index: 104;
|
||||
}
|
||||
span {
|
||||
margin-left: 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.info-middle img {
|
||||
float: left;
|
||||
margin-right: 6px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue