一、高德地图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)

七、覆盖物事件

    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() //楼块图层

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

html5 调用高德地图,高德地图在h5项目中的集成（点标记）
关于高德地图在项目中的集成,网上已经有很多相关的很优秀的文章了,故本篇内容仅用于参考和巩固. 1.使用高德地图之前需要在高德开放平台(https://lbs.amap.com/dev/index)创建 ...
react 使用 leaflet 百度地图_【React】react项目中应用百度地图添加起始点绘制路线...
如图:项目中百度地图的应用添加起始点.终点并绘制路线在展示代码的时候首先展示一下后台返回给我的接口 { 其中position_list参数代表的是用户的行驶点, area参数代表的是服务区的坐标点, ...
react项目中引入百度地图
项目目录如下: 在此index.html中加入如下代码即可: <!DOCTYPE html> <html lang="en"><head>< ...
React 项目中使用Echarts
直接上代码吧: react 项目中添加Echarts 相关模块 npm install echarts --save 代码: import React from 'react' import * as ...
react项目中使用mocha结合chai断言库进行单元测试
react项目中使用mocha结合chai断言库进行单元测试 git地址:https://github.com/yancekang/... 如果对你有所帮助,感谢start 项目搭建 create-r ...
优雅的在React项目中使用Redux
概念首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
如何优雅地在React项目中使用Redux
前言或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
中使用js修改变量值_谈一谈css-in-js在React项目中的使用
一.什么是css-in-js 参考:[css in js 简介] 简单来说,传统的前端方案推崇"关注点分离"原则,HTML.CSS.JavaScript 应该各司其职,进行分离. ...
[react] 在React项目中你用过哪些动画的包？
[react] 在React项目中你用过哪些动画的包? react-transition-group 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...
react前端显示图片_如何在react项目中引用图片？
如何在react项目中引用图片?本文码云笔记将为大家整理在react项目中插入图片以及背景图片的方法,希望对需要的小伙伴提供一些参考. 在react项目中插入图片以及背景图片的方法共有2种: 1.im ...

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

一、高德地图API

二、高德地图的概念

三、高德地图的生命周期

四、常用绑定事件

五、常用设置属性

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

七、覆盖物事件

八、图层

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

最新文章

热门文章