一、开发准备

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）点标记

1. 在地图上创建一个点标记

<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>

2. 点击地图添加点标记

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

<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, // 线条宽度，默认为 1
        strokeColor: '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, // 线条宽度，默认为 1
        strokeColor: '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)/2
        var 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）持久化的方式

如何持久化？

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