标签：define   eof   images   方法   ret   htm   策略   中文   complete   

高德地图使用

api地址
https://lbs.amap.com/api/javascript-api/summary
高德地图有提供公共接口，查看api，能实现一些项目基本需求效果

基本使用

注册帐号

使用高德api，首先需要注册帐号，并且申请key(以个人或者公司的名字)，获取key后才能使用高德地图API去使用开发地图相关功能

高德地图使用，省图显示，路线规划，行车轨迹

    
选择省份
    选择省份
选择层级
    0 - 显示省级
1 - 显示市级
2 - 显示区/县级

monitor_map.js

内容：自定义地图js API使用示例

 
//首先或一个地图（对象）
 var adCode = 440000;
 var depth = 1;
 var map = new AMap.Map("container", {
     resizeEnable: true,
     zoom: 7,
     center: [113.23333, 23.26667],
     pitch: 0,
     viewMode: ‘3D‘,
 });



 // 创建省份图层
 var disProvince;
 function initPro(code, dep) {
     dep = typeof dep == ‘undefined‘ ? 2 : dep;
     adCode = code;
     depth = dep;

     disProvince && disProvince.setMap(null);

     disProvince = new AMap.DistrictLayer.Province({
         zIndex: 12,
         adcode: [code],
         depth: dep,
         styles: {
             ‘fill‘: function (properties) {
                 // properties为可用于做样式映射的字段，包含
                 // NAME_CHN:中文名称
                 // adcode_pro
                 // adcode_cit
                 // adcode
                 var adcode = properties.adcode;
                 return getColorByAdcode(adcode);
             },
             ‘province-stroke‘: ‘cornflowerblue‘,
             ‘city-stroke‘: ‘white‘, // 中国地级市边界
             ‘county-stroke‘: ‘rgba(255,255,255,0.5)‘ // 中国区县边界
         }
     });

     disProvince.setMap(map);
 }

 
 // 颜色辅助方法
 var colors = {};
 var getColorByAdcode = function (adcode) {
     if (!colors[adcode]) {
         var gb = Math.random() * 155 + 50;
         colors[adcode] = ‘rgba(‘ + gb + ‘,‘ + gb + ‘,255,0.45)‘;
     }

     return colors[adcode];
 };

// 五省中心经纬度
 var centerMapLng = new Map();
 var centerMapLat = new Map();
 //lng; //经度
 //lat; //纬度
 centerMapLng.set("530000",102.72);
 centerMapLat.set("530000",25.05);

 centerMapLng.set("440000",113.23333);
 centerMapLat.set("440000",23.26667);

 centerMapLng.set("520000",106.63);
 centerMapLat.set("520000",26.65);

 centerMapLng.set("450000",108.22);
 centerMapLat.set("450000",22.48);

 centerMapLng.set("460000",110.32);
 centerMapLat.set("460000",20.03);
 // 按钮事件
 function changeAdcode(code) {
     if (code != 100000) {
         initPro(code, depth);
         setCenter(code);
     }
 }

 function setCenter(code){
     var lng = centerMapLng.get(code);
     var lat = centerMapLat.get(code)
     map.setCenter([lng,lat]);
 }

 function changeDepth(dep) {
     initPro(adCode, dep);
 }

 initPro(adCode, depth);

 //设置地图显示范围
 var mybounds = new AMap.Bounds([73, 4], [135,53]); // 设置经纬度边界  [西南经纬度,东北经纬度]
 //map.setBounds(mybounds); //会将地图放大
 map.setLimitBounds(mybounds);


 // 路线规划，需要有起点和重点经纬度

 //起点latitude: "23.167439" longitude: "113.46625"
 //latitude: "23.00637" longitude: "113.124749" 终点 佛山医院
 var truckDriving = new AMap.TruckDriving({
     policy: 0, // 规划策略
     size: 1, // 车型大小
     width: 2.5, // 宽度
     height: 2, // 高度      
     load: 1, // 载重
     weight: 12, // 自重
     axlesNum: 2, // 轴数
     province: ‘京‘, // 车辆牌照省份
 })


 var path = []
 path.push({lnglat:[113.46625, 23.167439]});//起点
 //path.push({lnglat:[113.324749, 23.107439]});//途径
 path.push({lnglat:[113.124749, 23.00637]});//终点



 truckDriving.search(path, function(status, result) {
     // result即是对应的货车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
     if (status === ‘complete‘) {
         //log.success(‘绘制货车路线完成‘)

         if (result.routes && result.routes.length) {
             drawRoute(result.routes[0]) 
         }
     } else {
         //log.error(‘获取货车规划数据失败：‘ + result)
     }
 })

 // 画路线
 function drawRoute (route) {
     var path = parseRouteToPath(route)

     var startMarker = new AMap.Marker({
         position: path[0],
         icon: ‘https://webapi.amap.com/theme/v1.3/markers/n/start.png‘,
         map: map,
         anchor: ‘bottom-center‘,
     })

     var endMarker = new AMap.Marker({
         position: path[path.length - 1],
         icon: ‘https://webapi.amap.com/theme/v1.3/markers/n/end.png‘,
         map: map,
         anchor: ‘bottom-center‘,
     })

     var routeLine = new AMap.Polyline({
         path: path,
         isOutline: true,
         outlineColor: ‘#ffeeee‘,
         borderWeight: 2,
         strokeWeight: 5,
         strokeOpacity: 0.9,
         strokeColor: ‘#0091ff‘,
         lineJoin: ‘round‘
     })

     map.add(routeLine);
     // 调整视野达到最佳显示区域
     map.setFitView([ startMarker, endMarker, routeLine ])
     //
     drawPath();
     map.setZoom(8);
 }

 // 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式
 // DrivingResult对象结构参考文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DriveRoute
 function parseRouteToPath(route) {
     var path = []

    for (var i = 0, l = route.steps.length; i 

记录一次开发试用记录，学习请看官网API，描写详细清晰

高德地图API简单使用

标签：define   eof   images   方法   ret   htm   策略   中文   complete   

原文地址：https://www.cnblogs.com/Narule/p/12912681.html