高德地图API学习笔记

一、开发准备
- 1）高德地图API获取
二、地图显示
- 1）引入资源
- 2）创建地图容器
- 3）配置容器样式
- 4）加载地图
- 5）添加图层
- 6）添加控件
三、地图交互
- 1）添加事件
- 2）点标记
- 3）绘制线
- 4）绘制多边形
- 5）距离测量
四、GeoJSON
- 1.什么是GeoJSON
- - ①几何信息
  - ②自定义属性
- 2.为什么要使用GeoJSON
- - 1）数据持久化
  - 2）持久化的方式

一、开发准备

1）高德地图API获取

在高德地图官网，注册为开发者，创建应用，即可得到Web程序的Key和安全秘钥。

二、地图显示

参考官方文档

1）引入资源

在对应的位置填入上面申请的安全密钥和Key

<script type="text/javascript">window._AMapSecurityConfig = {securityJsCode:'您申请的安全密钥',}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>

2）创建地图容器

<div id="container"></div>

3）配置容器样式

<style>html,body,#container{width: 100%; height: 100%;}
</style>

4）加载地图

<script>//AMap.Map()的第一个参数是对应的容器，第二个参数是设置地图参数的对象var map = new AMap.Map('container',{zoom: 17,  //设置地图显示的缩放级别center: [103.737026,36.108024],//设置地图中心点坐标，西北师范大学新校区viewMode: '3D',  //设置地图模式pitch : 50//俯仰角度50°})
</script>

更多地图的参数查看参考手册。

5）添加图层

<script>var traffic = new AMap.TileLayer.Traffic({'autoRefresh': true,//是否自动刷新，默认为false'interval': 180,//刷新间隔，默认180s});function add(){map.add(traffic); //通过add方法添加图层}function remove(){map.remove(traffic) //remove可以移除}
</script>

6）添加控件

<script>AMap.plugin(["AMap.ToolBar",'AMap.Scale','AMap.HawkEye','AMap.MapType'],function(){// 6.2 添加控件// ToolBar(工具条)            map.addControl(new AMap.ToolBar())// Scale(比例尺)map.addControl(new AMap.Scale())// HawkEye(鹰眼)//map.addControl(new AMap.HawkEye())// MapType(图层切换)map.addControl(new AMap.MapType())})
</script>

三、地图交互

1）添加事件

<script>map.on('click',function(event){console.log(event)console.log(`经度:${event.lnglat.lng},纬度:${event.lnglat.lat}`)})
</script>

2）点标记

在地图上创建一个点标记

<script>var marker = new AMap.Marker({position: new AMap.LngLat(103.737026,36.108024),offset: new AMap.Pixel(-10, -10),//偏移量title:'V',icon : '//vdata.amap.com/icons/b18/1/2.png'})map.add(marker)
</script>

点击地图添加点标记

将创建点标记放入单击事件即可

<script>map.on('click',function(e){console.log(e)// 8.1、添加点var marker = new AMap.Marker({position:e.lnglat,})// 8.2、把点添加至地图map.add(marker)})
</script>

3）绘制线

<script>var path = [new AMap.LngLat(116.368904,39.913423),new AMap.LngLat(116.382122,39.901176),new AMap.LngLat(116.387271,39.912501),new AMap.LngLat(116.398258,39.904600)];// 创建折线实例var polyline = new AMap.Polyline({path: path,  borderWeight: 2, // 线条宽度，默认为 1strokeColor: 'red', // 线条颜色lineJoin: 'round' // 折线拐点连接处样式});// 将折线添加至地图实例map.add(polyline);
</script>

4）绘制多边形

<script>// 多边形轮廓线的节点坐标数组var path = [new AMap.LngLat(116.368904,39.913423),new AMap.LngLat(116.382122,39.901176),new AMap.LngLat(116.387271,39.912501),new AMap.LngLat(116.398258,39.904600)];var polygon = new AMap.Polygon({path: path,  fillColor: '#fff', // 多边形填充颜色borderWeight: 2, // 线条宽度，默认为 1strokeColor: 'red', // 线条颜色});map.add(polygon);
</script>

5）距离测量

<script>// 1.创建两个点var m1 = new AMap.Marker({map:map,//将m1这个点添加到map地图中draggable:true,//此点可以拖拽position:new AMap.LngLat(103.734711,36.107818)})var m2 = new AMap.Marker({map:map,//将m2这个点添加到map地图中draggable:true,//此点可以拖拽position:new AMap.LngLat(103.738802,36.105705)})// 2.准备一条线var line = new AMap.Polyline({strokeColor:'#80d8ff',//描边的颜色isOutline:true,//包含轮廓outlineColor:'white'})line.setMap(map)// 3.准备文本var text = new AMap.Text({text:'',style:{'background-color':'#29b6f6','border-color':'#1f5fe','font-size':'16px',},})text.setMap(map)// 4.计算function compute(){// 得到m1和m2的经纬度var p1 = m1.getPosition()var p2 = m2.getPosition()var textPos = p1.divideBy(2).add(p2.divideBy(2))//(p1+p2)/2var distance = Math.round(p1.distance(p2))var path = [p1,p2]line.setPath(path) //绘制线，根据p1,p2起始点和终点的坐标text.setText('距离为：'+distance+'米')text.setPosition(textPos)}compute()m1.on('dragging',compute)m2.on('dragging',compute)
</script>

四、GeoJSON

1.什么是GeoJSON

GeoJSON是一种保存地理信息数据的格式

{"type": "Feature","geometry": {"type": "Point","coordinates": [125.6, 10.1]},"properties": {"name": "Dinagat Islands"}
}

GeoJSON主要包括两个部分

几何信息
自定义属性

①几何信息

  "geometry": {"type": "Point","coordinates": [125.6, 10.1]}

type：几何类型；可以是点 线 面
coordinates：坐标，构造几何的经纬度坐标

②自定义属性

  "properties": {"name": "Dinagat Islands"}

自定义属性中，可以使用键值对定义任意信息

2.为什么要使用GeoJSON

1）数据持久化

一般情况下，我们在地图上绘制的点在刷新浏览器的时候就没有了。

我们绘制的点只是临时性的加载在地图中，这些数据是保存在内存中的

如果需要将数据保存下来，我们需要将数据保存到硬盘中，这个过程叫数据持久化

2）持久化的方式

如何持久化？

使用GDB数据库，将数据保存到地理数据库中
使用GeoJSON，将数据保存到GeoJSON格式的文件中
- 小型应用GeoJSON
- 大型应用GDB

高德地图API学习笔记相关推荐

转载：高德地图API学习从零开始学高德JS API（一）地图展现
原文地址:https://www.cnblogs.com/milkmap/p/3687855.html [高德地图API]从零开始学高德JS API(一)地图展现--仙剑地图,麻点图,街景,室内图摘 ...
高德地图API学习二、获取定位数据
***首先需要到高德官方中申请key!!! 一.配置AndroidManifest.xml 首先,声明Service组件 <service android:name="com.amap ...
【学习记录】使用高德地图API开发一个简单基础的WebGIS系统(GIS考研院校专题地图网站)
文章目录 0. 前言 1. 功能设计 2. 数据处理 3. 项目结构 4. 功能实现 4.1. 初始化 4.2. 地图基础功能模块 4.2.1. 放大缩小功能, 图层管理功能 4.2.2. 地图测量功 ...
高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装
Map组件设计文档组件设计目的分析当前各业务方向(销售端.商城.数据可视化.TMS)内地图相关应用的地图功能使用情况,封装Map组件供给各业务向进行使用. 将高德地图API进行二次封装,降低地图相 ...
html高德地图api使用教程,高德地图API如何使用？
这个很简单,需要先注册一下高德地图开发者,然后创建应用.添加Key,最后通过script标签引入网页,就可以直接使用高德地图API了,下面我简单介绍一下实现过程,主要内容如下: 1.首先,注册高德地图 ...
python调用高德地图api 可视化_Python：利用高德地图API实现找房
记:本项目是在实验楼上看到的,但是上面的代码由于没有及时维护,爬虫文件的代码不再能完整的把所有房源信息爬取下来,我根据最新的58同城官网进行了研究,现在的官网的房源信息已经不是分页的了,而是拉到最后自 ...
高德地图api如何不显示logo_Python爬取高德地图POI数据获取「洗浴推拿指南」
学习交流群认识高德地图API 打开"高德开放平台",点击"开发文档",在"Web服务"下寻找并点击"搜索API". 我 ...
android室内地图,概述-Android 室内地图SDK | 高德地图API
Android 室内地图 SDK 简介说明: 室内地图数据对新用户暂停开放,建议您使用 Android地图SDK 可实现室内外一体化效果. 高德地图 Android 室内地图SDK 是一套室内地图开 ...
android 地图选房效果,概述-Android 室内地图SDK | 高德地图API
Android 室内地图 SDK 简介说明: 室内地图数据对新用户暂停开放,建议您使用 Android地图SDK 可实现室内外一体化效果. 高德地图 Android 室内地图SDK 是一套室内地图开 ...
高德地图开发学习Demo
高德地图开发学习Demo 提供者:sannas 开源项目地址: https://github.com/851151582/NaviLocXf.git Demo实现地图定位.搜索及导航功能,通过关键字可 ...