高德地图JSAPI Loader 覆盖物效果

155 阅读1分钟

image.png

上面就是效果图

关于页面使用和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();

\


      })

    }