上面就是效果图
关于页面使用和js引入都在第一篇文章,我这里不重复写出来了,主要还是我懒,呵呵
methods: {
initMap(lng="114.5187723", lat="28.005398"){
AMapLoader.load({
key: this.key,
version: '1.4.15',
plugins: ["AMap.Geocoder", "AMap.Autocomplete", "AMap.PlaceSearch"]
}).then(()=>{
this.map = new AMap.Map("container", {
zoom: 14,
center: [lng, lat],
viewMode:'3D',
mapStyle: 'amap://styles/darkblue' // 自定义地图
});
var path = [
[116.169465,39.932670],
[116.160260,39.924492],
[116.150625,39.710019],
[116.183198,39.709920],
[116.226950,39.777616],
[116.442621,39.799892],
[116.463478,39.790066],
[116.588276,39.809551],
[116.536091,39.808859],
[116.573856,39.839643],
[116.706380,39.916740],
[116.600293,39.937770],
[116.514805,39.982375],
[116.499935,40.013710],
[116.546520,40.030443],
[116.687668,40.129961],
[116.539697,40.080659],
[116.503390,40.058474],
[116.468800,40.052578]
];
var polygon = new AMap.Polygon({
map: this.map,
fillOpacity:0.6,
fillColor: '#CCF3FF', // 覆盖物颜色
strokeColor: '#CC66CC', // 覆盖物描边颜色
path: path
});
var area = Math.round(AMap.GeometryUtil.ringArea(path));
var text = new AMap.Text({
position: new AMap.LngLat(116.468800,40.052578),
text: '区域面积' + area + '平方米',
offset: new AMap.Pixel(-20, -20)
})
this.map.add(text);
this.map.setFitView();
\
})
}