1.配置 build---webpack.base.conf.js---module.exports-----
externals: {
'AMap': 'AMap',
},
2.
物联网监测
监测数量
数据转换时间
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('
')infoWindow = new AMap.InfoWindow({
content: info.join('
')
})
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('
')infoWindow = new AMap.InfoWindow({
content: info.join('
')
})
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()
}
})
})
}
}
}
}
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;
}