高德地图开发说明

高德地图介绍

本次开发完全使用高德提供的API，实现移动端的地图显示，当前位置地图定位，给定坐标点数组Marker标记，实时动态轨迹绘制

具体使用方法

1.成为高德开发者，获取高德key

登录高德开发平台官网 http://lbs.amap.com/ 注册一个高德账号，注册成功后登录，点击右上角进入控制台，然后创建新的应用，选择你的应用类型，获得key值

2.加载高德地图API

引入js,css只需像普通js文件和css文件一样就行，不过高德的路径是个URL，不在本地，下面就是一个基本的地图显示用例

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  //兼容IE8
  6.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> //更好的在手机端适配
  7.     <title>基本地图展示</title>
  8.     <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>  //引入的地图css
  9.     <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>   //把申请的key值换掉
  10.     <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>  //引入的地图css
  11.     </head>
  12.  <body>
  13.     <div id="container"></div>           //地图盒子  不设宽高就是全屏显示
  14.  <script>
  15.   var map = new AMap.Map('container', {           //显示地图
  16.     resizeEnable: true,                           //是否支持缩放
  17.     zoom:11,                                      //缩放比例
  18.     center: [116.397428, 39.90923]                //地图中心
  19.    });
  20. </script>
  21. </body>
  22. </html>

3.在地图里添加不同控件

  1. AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView','AMap.MapType'],
  2.     function(){
  3.         map.addControl(new AMap.ToolBar());           //添加工具条
  4.         map.addControl(new AMap.Scale());             //添加比例尺
  5.         map.addControl(new AMap.OverView({isOpen:true})); //添加鹰眼
  6.         map.addControl(new AMap.MapType());               //添加卫星地图和平面图切换  路况
  7. });

4.地图定位当前位置

  1. map.plugin('AMap.Geolocation', function() {     //定位参数AMap.Geolocation和添加控件都写在一个数组里，与添加控件原理相同
  2.     geolocation = new AMap.Geolocation({        //下面参数可根据需要增加或减少
  3.         enableHighAccuracy: true,//是否使用高精度定位，默认:true
  4.         timeout: 10000,          //超过10秒后停止定位，默认：无穷大
  5.         maximumAge: 0,           //定位结果缓存0毫秒，默认：0
  6.         convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
  7.         showButton: true,        //显示定位按钮，默认：true
  8.         buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
  9.         buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
  10.         showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
  11.         showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
  12.         panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
  13.         zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
  14.     });
  15.     map.addControl(geolocation);
  16.     geolocation.getCurrentPosition();       //获得当前位置
  17.     AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
  18.     AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
  19. });
  20. //解析定位结果
  21. function onComplete(data) {
  22.     var str=['定位成功'];
  23.     str.push('经度：' + data.position.getLng());
  24.     str.push('纬度：' + data.position.getLat());
  25.     str.push('精度：' + data.accuracy + ' 米');
  26.     str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
  27.     document.getElementById('tip').innerHTML = str.join('<br>');
  28. }
  29. //解析定位错误信息
  30. function onError(data) {
  31.     document.getElementById('tip').innerHTML = '定位失败';
  32. }

5.根据给定不同点的经纬度，在地图上标注

  1. map.clearMap();  //首先清除地图覆盖物
  2. var markers = [{  //给定标记的点的集合
  3.     icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',  //标注的图片，可自定义本地设置
  4.     position: [116.205467, 39.907761]                                 //需要标注的经纬度
  5. }, {
  6.     icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b2.png',
  7.     position: [116.368904, 39.913423]
  8. }, {
  9.     icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b3.png',
  10.     position: [116.305467, 39.807761]
  11. }];
  12. // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
  13. markers.forEach(function(marker) {                                //对标注点遍历
  14.     new AMap.Marker({
  15.         map: map,
  16.         icon: marker.icon,
  17.         position: [marker.position[0], marker.position[1]],
  18.         offset: new AMap.Pixel(-12, -36)                              //偏移位置
  19.     });
  20. });

6.一个完整的地图包含定位，添加几个工具条，位置标注，代码如下

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
  5.     <meta charset="UTF-8">
  6.     <title></title>
  7.     <link rel="stylesheet" href="css/font-icons.css">
  8.     <link rel="stylesheet" href="css/iuapmobile.um.css">
  9.     <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
  10.     <style>
  11.         .amap-touch-toolbar .amap-zoomcontrol{
  12.             bottom:-30px;
  13.             right:0px;
  14.         }
  15.     </style>
  16.     <script src="js/Frameworks/iuapmobile.frameworks.core.js" ></script>
  17.     <script src="js/summer.js" ></script>
  18.     <script src="js/jquery.min.js" ></script>
  19.     <script src="js/Frameworks/iuapmobile.frameworks.ui.js" ></script>
  20.     <script src="js/index.js" ></script>
  21.     <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=d13df96ab37812514b272b0d34a25092</script>//此处   引用高德插件，须带上开发key,请自行替换          
  22. </head>
  23. <body>
  24.     <div class="um-win" id="index">
  25.         <div id="header" class="um-header">
  26.             <a href="#" class="um-back">返回</a>
  27.             <h3>标题</h3>
  28.             <a href="#" class="um-header-right ti-plus f20"></a>
  29.         </div>
  30.         <div id="main" class="um-content p15">                
  31.                           <div id="container"></div>
  32.                           <div class="button-group">
  33.                 <input type="button" class="button mr20" value="删除多个点标记" id="clearMarker"/>
  34.             </div>
  35.         </div>
  36.     </div>
  37.     <script>
  38.         $(function() {
  39.             $('#container').parent().css('position','relative');
  40.              var map, geolocation,scale,toolbar;
  41.             //加载地图，调用浏览器定位服务
  42.             map = new AMap.Map('container', {
  43.                 resizeEnable: true,
  44.                 zoom:11,       
  45.             });
  46.             map.plugin(['AMap.Geolocation','AMap.Scale','AMap.ToolBar',    'AMap.MapType'], function() {    //添加定位控件
  47.                 geolocation = new AMap.Geolocation({                       //定位设置
  48.                     enableHighAccuracy: true,//是否使用高精度定位，默认:true
  49.                     convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true         
  50.                      showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
  51.                     timeout: 10000,          //超过10秒后停止定位，默认：无穷大
  52.                     buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
  53.                     zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
  54.                     buttonPosition:'RB',             
  55.                 });
  56.                 scale=new AMap.Scale();                            //添加比例尺控件
  57.                 toolbar=new AMap.ToolBar();                     //添加工具栏控件
  58.                 maptype=new AMap.MapType();
  59.                 map.addControl(geolocation);                    
  60.                 map.addControl(scale);
  61.                 map.addControl(toolbar);
  62.                 map.addControl(maptype);
  64.                 geolocation.getCurrentPosition();                                               
  65.             });     
  66.              map.clearMap();  // 清除地图覆盖物
  67.                 var markers = [{           //标记位置
  68.                     icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
  69.                     position: [116.205467, 39.907761]
  70.                 }, {
  71.                     icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b2.png',
  72.                     position: [116.368904, 39.913423]
  73.                 }, {
  74.                     icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b3.png',
  75.                     position: [116.305467, 39.807761]
  76.                 }];
  77.                 // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
  78.                 var objMarker=[];
  79.                 markers.forEach(function(marker) {
  80.                  var marker=new AMap.Marker({
  81.                         map: map,
  82.                         icon: marker.icon,
  83.                         position: [marker.position[0], marker.position[1]],
  84.                         offset: new AMap.Pixel(-12, -36)             //偏移位置
  85.                     });
  86.                     objMarker.push(marker);
  87.                 });
  88.                 AMap.event.addDomListener(document.getElementById('clearMarker'), 'click', function() {                     
  89.                     map.remove(objMarker);
  90.                 }, false);                                         
  91.         });            
  92.     </script>
  93. </body>

文档更新时间: 2018-06-06 13:54