vue加载高德地图,加标记点,点出文本框

2018/06/29 15:55
阅读数 2.6K

1.配置 build---webpack.base.conf.js---module.exports-----

externals: {
'AMap': 'AMap',
},
2.
<template>
<div>
<div id="container" style="width:2500px; height:900px"></div>
<div style="width: 100%;height: 100px;position:absolute;top:50px;">
<div align="center" style="font-size: 40px;color: black;width: 800px;height: 52px;position:absolute;cursor:pointer;left:27%">
物联网监测
</div>
</div>
<div style="width: 100%;height: 100px;position:absolute;top:100px;">
<div align="center" style="font-size: 30px;color: black;width: 800px;height: 52px;position:absolute;cursor:pointer;left:-10%">
监测数量
</div>
</div>
<div style="width: 100%;height: 100px;position:absolute;top:150px;">
<div align="center" style="font-size: 30px;color: black;width: 800px;height: 52px;position:absolute;cursor:pointer;left:-10%">
数据转换时间
</div>
</div>
</div>
</template>


<script>
import AMap from 'AMap'
var district, map
export default {
mounted: function() {
this.init()
},
methods: {
init: function() {
map = new AMap.Map('container', {
center: [126.5351300000, 45.8033600000],
resizeEnable: true,
zoom: 10
})
var lnglats = [
[130.5423444, 45.77215307],
[130.5798314, 45.75359363],
[130.5318421, 45.78454601],
[130.5329888, 45.78296477]
]
var marker
for (var i = 0; i < lnglats.length; i++) {
marker = new AMap.Marker({
position: lnglats[i],
map: map
})
if (i === 0) {
marker.on('click', function openInfo() {
var infoWindow
var info = []
var position = new AMap.LngLat(130.5423444, 45.77215307)
info.push('<div style="height: 800px ; width: 1200px"><div>勃利县土地确权地块1信息(10户)</div>')
info.push('<a href="index2.html">地块详细信息</a> ')
info.push('</div>')
infoWindow = new AMap.InfoWindow({
content: info.join('<br/>')
})
infoWindow.open(map, position)
})
}
if (i === 1) {
marker.on('click', function openInfo() {
var infoWindow
var info = []
var position = new AMap.LngLat(130.5798314, 45.75359363)
info.push('<div id="atent"><div>勃利县土地确权地块1信息(10户)</div>')
info.push('<a href="index2.html">地块详细信息</a> ')
info.push('</div>')
infoWindow = new AMap.InfoWindow({
content: info.join('<br/>')
})
infoWindow.open(map, position)
})
}
}
map.setFitView()
addheilongjang()
function addheilongjang() {
AMap.service('AMap.DistrictSearch', function() {
var opts = {
subdistrict: 1,
extensions: 'all',
level: 'city'
}
district = new AMap.DistrictSearch(opts)
district.setLevel('district')
district.search('黑龙江', function(status, result) {
var bounds = result.districtList[0].boundaries
var polygons = []
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
var polygon = new AMap.Polygon({
map: map,
strokeWeight: 1,
path: bounds[i],
fillOpacity: 0.7,
fillColor: '#CCF3FF',
strokeColor: '#CC66CC'
})
polygons.push(polygon)
}
map.setFitView()
}
})
})
}
}
}
}
</script>
<style>

html, body {
margin: 0;
height: 100%;
width: 100%;
position: absolute;
}

#container {
position: absolute;
top: 100%;
left:-10%;
right: 0%;
bottom: 100%;
width: 500%;
height: 500%;
}

.button-group {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 12px;
padding: 10px;
}

.button-group .button {
height: 28px;
line-height: 28px;
background-color: #0D9BF2;
color: #FFF;
border: 0;
outline: none;
padding-left: 5px;
padding-right: 5px;
border-radius: 3px;
margin-bottom: 4px;
cursor: pointer;
}
.button-group .inputtext {
height: 26px;
line-height: 26px;
border: 1px;
outline: none;
padding-left: 5px;
padding-right: 5px;
border-radius: 3px;
margin-bottom: 4px;
cursor: pointer;
}
/*
.tip {
position: absolute;
bottom: 30px;
right: 10px;

text-align: center;
border: 1px solid #ccc;
line-height: 30px;
border-radius: 3px;
padding: 0 5px;
font-size: 12px;
}
*/
#tip {
background-color: #fff;
padding-left: 10px;
padding-right: 10px;
position: absolute;
font-size: 12px;
right: 10px;
top: 20px;
border-radius: 3px;
border: 1px solid #ccc;
line-height: 30px;
}

/*
#tip input[type='button'] {
margin-top: 10px;
margin-bottom: 10px;

height: 30px;
text-align: center;
line-height: 30px;
color: #fff;
font-size: 12px;
border-radius: 3px;
outline: none;
border: 0;
}
*/
.amap-info-content {
font-size: 12px;
}

#myPageTop {
position: absolute;
top: 5px;
right: 10px;
background: #fff none repeat scroll 0 0;
border: 1px solid #ccc;
margin: 10px auto;
padding:6px;
font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
font-size: 14px;
}
#myPageTop label {
margin: 0 20px 0 0;
color: #666666;
font-weight: normal;
}
#myPageTop input {
width: 170px;
}
#myPageTop .column2{
padding-left: 25px;
}
</style>


展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部