<template>
<div class="hot_wrapper">
<div class="map">
<div style="height:100%;width:100%;outline: none!important;" id="container" tabindex="0"> </div>
</div>
</div>
</template>
<script>
import AMap from "AMap";
export default {
props:['typeMap','activedIndex'],
data() {
return {
adCode: 330600, // Shaoxing
city: 'Shaoxing City',
}
},
methods: {
initMap() {// Create a map
var that = this
this.map = new AMap.Map('container', {
zoom:11,
zooms: [10,17],
center:[120.535719,29.856348],
// center:[120.580444,29.859701],
resizeEnable: true,
showIndoorMap: false,
mapStyle:"amap://styles/0206dfbcbabc11e4971c1a2e6bcdda2e",
// mapStyle:"amap://styles/darkblue",
features:['point','road','bg'],// Map elements
viewMode:"2D",
pitch:45,
zoomEnable:true,
// dragEnable: false,
})
AMap.plugin('', function() {
that.geocoder = new AMap.Geocoder({
})
})
},
init1 (city) {// Area cover
var that =this
if( that.polygon ) {
that.map.remove(that.polygon)
}
AMap.plugin('', function () {
new AMap.DistrictSearch({
extensions: 'all',
subdistrict: 0
}).search(city, function(status, result) {// Outer polygon coordinate array and inner polygon coordinate array
var outer = [
new AMap.LngLat(-360, 90, true),
new AMap.LngLat(-360, -90, true),
new AMap.LngLat(360, -90, true),
new AMap.LngLat(360, 90, true)
]
var holes = result.districtList[0].boundaries
var pathArray = [outer]
pathArray.push.apply(pathArray, holes)
that.polygon = new AMap.Polygon({
pathL: pathArray,
strokeColor: 'red',//City border color
strokeWeight: 1,
fillColor: '#220986', // Mask background color black
fillOpacity: 1
})
that.polygon.setPath(pathArray)
that.map.add(that.polygon)
})
})
},
}
mounted() {
this.initMap()
this.init1(this.city)
}
}
</script>
