1.配置 build---webpack.base.conf.js---module.exports-----html
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>