高德Web开发入门之一

Posted 2020-10-06 醒掌天下权醉卧美人膝

高德Web开发

一、地图开发阐述

　　1）不管是高德地图的Web开发使用，亦或是百度地图的应用开发，都可以直接百度“高德地图/百度地图”，进入地图首页下边“开放平台”。然后就可以更具自己需要的功能选择不同的API。

　　2）如果使用API必须进行注册得到自己的一个KEY，这个key是需要在以后的代码中用到的，所以一定要先记下来。

　　3）在开发过程中不像其他前端框架需要引用jar包，所以不应担心环境的架设，只需要按照下边的步骤做就可以，不必担心。

　　4）在地图上需要注意的功能：本地定位，目的地定位，路线选择，

二、代码编写逻辑　　

　　1）创建新项目asp.net空项目，可以使用html进行显示。

　　2）html页面修改Mete信息，创建需要展示的div，设置其id为“container”

　　3）设计该id样式信息，引入js，确定你的地图应用开发，用key来唯一确定。

　　4）js代码中来确定初始化地图的中心位置，以及覆盖图层来实现定位突变显示

　　5）js代码实现小工具的使用，加入3D显示功能

三、代码Demo

　　1）html页面修改Mete信息，创建需要展示的div，设置其id为“container”

    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

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

　　

　　2）设计该id样式信息，引入js，确定你的地图应用开发，用key来唯一确定

　　　　在这里使用KETY为“高德地图示例-车联网-ADemo”

body, html, #container {
            height: 100%;
            margin: 0px;
        }

    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=高德地图示例-车联网-ADemo"></script>
    <script src="ADemo.js"></script>

　　

　　3）ADemo.js代码中来确定初始化地图的中心位置，以及覆盖图层来实现定位突变显示

var map = new AMap.Map(‘container‘,
        {
            //-------------------------初始化中心点一，直接输入Start-------------------------
            resizeEnable: true,
            zoom: 10,
            //center取值方法一：
            center: [116.480983, 40.0958]
            //center取值方法二
            //new AMap.LngLat(116.39,39.9)});
            //-------------------------直接输入End-------------------------

            //-------------------------初始化中心点二，通过函数设置中心点Start,只需要修改中心点数据就可以-------------------------
            //  map.setZoom(10);
            //  map.setCenter([116.39,39.9]);
            //-------------------------初始化中心点，通过函数设置中心点End-------------------------

        });


var marker = new AMap.Marker({
    position: [116.480983, 39.989628],//marker所在的位置
    map: map//创建时直接赋予map属性
});
//也可以在创建完成后通过setMap方法执行地图对象
marker.setMap(map);

　　

　　4）js代码实现小工具的使用，加入3D显示功能

    pitch: 75,
    viewMode: ‘3D‘,
    zoom: 17,
    expandZoomRange: true,
    zooms: [3, 20],
    center: [116.333926, 39.997245]
});

　　

四、总结

　　1）使用MapWebApi不需要太多的功能，只需要记住Key的应用就没有容易疏忽的点了

　　2）源码分享：http://pan.baidu.com/s/1jIy0hKy