【高德地图在React项目中的使用——（二）各种配置的使用】

咸鱼翻身不想当咸鱼

已于 2023-02-17 14:00:23 修改

阅读量4.3k

点赞数 4

分类专栏：高德地图 React 文章标签： react.js 前端高德地图

于 2022-08-03 18:15:13 首次发布

本文链接：https://blog.csdn.net/qq_45149366/article/details/126125667

版权

React 同时被 2 个专栏收录

11 篇文章 2 订阅

订阅专栏

高德地图

2 篇文章 0 订阅

订阅专栏

一、高德地图API

高德地图入门概述

高德地图官方API

高德地图配置项

二、高德地图的概念

包括：显示的地图、图层、点标记与矢量图形、事件功能与信息窗体、高德地图插件（需单独引入，可选择异步加载或同步加载）。

地图组成：

地图容器Container
图层Layers
矢量图形Vector Overlays
点标记Markers
地图控件Map Controls

常用名词：

插件Plugins
地图级别 ZoomLevel
经纬度LngLat
底图BaseLayer
地图要素Map Features
标注Labels
地图平面像素坐标Plane Coordinates
投影Projection

基础类：

经纬度 AMap.LngLat
像素点 AMap.Pixel
像素尺寸 AMap.Size
经纬度矩形边界 AMap.Bounds

三、高德地图的生命周期

1.地图的创建

const map = new AMap.Map('container')

2.地图加载完成

map.on('complete',{})

3.地图的销毁

map.destory() //注销地图实例，释放内存，清空容器

四、常用绑定事件

map.on('click',xxx) //绑定单击事件
map.on('dblclick',xxx) //绑定双击事件


map.on('moveend',xxx) //绑定地图移动事件（移动结束触发）
map.on('movestart',xxx) //
map.on('movemove',xxx) //绑定地图移动事件（移动中触发）

//地图移动是 地图缩放和拖拽的结合

map.on('zoomend',xxx) //绑定地图缩放事件（缩放结束触发）
map.on('zoomchange',xxx) //
map.on('zoomstart',xxx) //绑定地图缩放事件（缩放开始触发）

map.on('dragend',xxx) //绑定地图拖拽事件（拖拽结束触发）
map.on('dragging,xxx) //绑定地图拖拽事件（正在拖拽触发）
map.on('dragstart',xxx) //


map.off('moveend',xxx) //解绑对应事件

五、常用设置属性

map.setLang('zh_cn')//设置中英文地图，en、zh_ne、zh_cn
map.getZoom()//获取当前地图级别
map.getCenter()//获取当前地图中心位置
map.setZoom(zoom)//设置地图层
map.setCenter([lng,lat])//设置地图中心点
map.setZoomAndCneter(zoom,[lng,lat])//同时设置地图层级与中心点
map.getCity((info)=>{})//获取地图当前行政区
map.setCity('')//设置地图当前行政区，可通过中文城市名、adcode、citycode等设置地图的中心点

map.setFitView(overlays, immediately, avoid, maxZoom)//根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别，参数均可缺省。

可在高德官网下载省市区县对应的abcode、citycode

六、Marker的添加与移除以及某些覆盖物事件

//构造点标记
const marker = new AMap.Marker({
    icon:'XXX.png',
    position:[lng,lat]
})
map.add(marker) //添加一个覆盖物
map.remove(marker) //移除一个覆盖物
map.add([marker,marker]) //添加多个覆盖物
map.remove([marker,marker]) //移除多个覆盖物
map.clearMap() //清除地图上所有添加的覆盖物

map.getAllOverlays('marker') //获取某类覆盖物，'marker'、'polyline'、'polygon'
//利用extData属性给覆盖物添加id，获取特定的覆盖物
const marker = new AMap.Marker({
    icon:'',
    position:[],
    extData: {id: 1}
}
const id = marker.getExtData().id

//从多个点标记中删除指定点
markers[0].setMap(null)


//存储某类点标记
//一、通过OverlayGroup
let markerList = new AMap.OverlayGroup() //写在组件外层
list.forEach(item => {
    const marker = new AMap.Marker({})
    marker.on('click', () => {})
    markerList.addOverlay(marker)
})
mapRef.current.add(markerList)
//overlaygroup中的点显示或者隐藏
markerList.eachOverlay(item => {
   item.show()
   item.hide()
})
//二、通过数组存储
const markerList = [] //写在组件外层
list.forEach(item => {
    const marker = new AMap.Marker({})
    marker.on('click', () => {})
    markerList.push(marker)
})
mapRef.current.add(markerList)
//显示隐藏
markerlist.forEach(item => {
    item.show()
    item.hide()
})

七、覆盖物事件

    var lineArr = [
        [116.368904, 39.913423],
        [116.382122, 39.901176],
        [116.387271, 39.912501],
        [116.398258, 39.904600]
    ];
    var circle = new AMap.Circle({
        map: map,
        center: lineArr[0],          //设置线覆盖物路径
        radius: 1500,
        strokeColor: "#3366FF", //边框线颜色
        strokeOpacity: 0.3,       //边框线透明度
        strokeWeight: 3,        //边框线宽
        fillColor: "#FFA500", //填充色
        fillOpacity: 0.35//填充透明度
    });
    var polygonArr = [[116.403322, 39.920255],
        [116.410703, 39.897555],
        [116.402292, 39.892353],
        [116.389846, 39.891365]];
    var polygon = new AMap.Polygon({
        map: map,
        path: polygonArr,//设置多边形边界路径
        strokeColor: "#FF33FF", //线颜色
        strokeOpacity: 0.2, //线透明度
        strokeWeight: 3,    //线宽
        fillColor: "#1791fc", //填充色
        fillOpacity: 0.35, //填充透明度
        draggable: true //允许覆盖物被拖拽
    });

marker.on('mouseover',xxx) //鼠标移入覆盖物
marker.on('mouseout',xxx) //鼠标移出覆盖物
marker.on('click',xxx) //点击覆盖物


//在指定位置打开信息窗体
    function openInfo() {
        //构建信息窗体中显示的内容
        var info = [];
        info.push("<div><div><img style=\"float:left;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
        info.push("<div style=\"padding:0px 0px 0px 4px;\"><b>高德软件</b>");
        info.push("电话 : 010-84107000   邮编 : 100102");
        info.push("地址 :北京市朝阳区望京阜荣街10号首开广场4层</div></div>");
        infoWindow = new AMap.InfoWindow({
            content: info.join("<br/>")  //使用默认信息窗体框样式，显示信息内容
        });
        infoWindow.on('open',showInfoOpen)
        infoWindow.on('close',showInfoClose)
        infoWindow.open(map, map.getCenter());

    }

map.emit('count',count+=1) //触发自定义事件count
map.on('count',(count) => { console.log(count)} )

八、图层

const satellite = new AMap.TileLayer.Satellite({
    map: map,
    zIndex: 18, //层级
    opacity: 0.8 //图层透明度
}) //官方卫星图层
const roadnet= new AMap.TileLayer.RoadNet({
    map: map
}) //路由图层

satellite.setMap(map) //添加图层
satellite.setMap(null) //移除图层
satellite.show() //显示图层
satellite.hide() //隐藏图层

satellite.setzIndex(val); //设置图层层级
satellite.setOpacity(val); //设置图层透明度

map.add(roadnet) //添加图层
map.remove(roadnet) //移除图层
map.add([satellite,roadnet]) //批量天机图层

//也可以直接在map的options属性中添加图层
const map = new AMap.Map('container', {
    layers:[new AMap.TileLayer(), new AMap.TileLayer.Satellite()]
})


new AMap.TileLayer() //高德默认标准图层
new AMap.TileLayer.Traffic() //实时路况图层
new AMap.TileLayer.Satellite() //卫星图
new AMap.TileLayer.Satellite() //路网
new AMap.Buildings() //楼块图层