高德地图API入门-marker标注以及区域色块着色

1、vue高德地图api安装

npm i @amap/amap-jsapi-loader --save

2、地图初始化，加载卫星titlemap

        initMap(){
            // window._AMapSecurityConfig = {
            //     serviceHost:'http://1.1.1.1:80/_AMapService',
            //     // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
            // }
            window._AMapSecurityConfig = {
                securityJsCode: '申请的秘钥',
            }

            let location = [111.980841,26.441705]
            // location = [113.371686,23.100068]

            AMapLoader.load({
                key:"申请的key",             // 申请好的Web端开发者Key，首次调用 load 时必填
                version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins:['AMap.PlaceSearch',
                    'AMap.DistrictSearch'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等

            }).then((AMap)=>{
                this.map = new AMap.Map("container",{  //设置地图容器id
                    viewMode:"3D",    //是否为3D地图模式
                    zoom:15.5,           //初始化地图级别
                    center:location, //初始化地图中心点位置
                    layers: [new AMap.TileLayer.Satellite()],
                });


                // 添加图层
                this.addXYZTileLayer()

                // this.drawBounds()

                this.searchPlace()
                this.drawPolygon()
                this.drawMarker()

            }).catch(e=>{
                console.log(e);
            })
        },

 3、绘制多边形区域

        drawPolygon(){
            let path = [
                [111.972279,26.438807],
                [111.985283,26.438692],
                [111.985068,26.44265],
                [111.984381,26.442919],

                [111.984338,26.443764],
                [111.98481,26.444148],
                [111.984982,26.446838],
                [111.982665,26.447875],

                [111.982708,26.447952],
                [111.981849,26.447107],
                [111.981806,26.443764],
                [111.978802,26.443149],

                [111.978674,26.44119],
                [111.971721,26.441574],

            ]
            const polygon = new AMap.Polygon({
                strokeWeight: 2,
                path: path,
                fillOpacity: 0.4,
                fillColor: "#ecb9ef",
                strokeColor: "#0ba7e7"
            });
            //注册事件，鼠标移入高亮
            polygon.on('mouseover',()=>{
                polygon.setOptions({
                        fillOpacity: 0.8,
                        fillColor: "#ecb9ef",
                }

                )
            })
            //注册事件，鼠标移移出取消高亮
            polygon.on('mouseout',()=>{
                polygon.setOptions({
                    fillOpacity: 0.4,
                    fillColor: "#ecb9ef",
                    strokeColor: "#0ba7e7"
                    }

                )
            })
            let polygons = []
            polygons.push(polygon);
            this.map.add(polygons);
        },

4、地图上显示标注marker

       drawMarker(){
            let markerContent = '' +
                `
` +
                `祁阳科技工业园` +
                '
';

            var marker = new AMap.Marker({
                position: new AMap.LngLat(111.98024,26.43898),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: '祁阳科技工业园',
                content: markerContent,
                anchor: 'bottom-center',//锚点
                offset: [-100,-100],
            });

// 将创建的点标记添加到已有的地图实例：
            this.map.add(marker);
        },

5、最后效果图