高德地图API使用分享

https://lbs.amap.com/api/javascript-api/summary

1. 申请JSAPI的开发者Key

2. 在页面中引入高德地图JavaScript API入口脚本

3. 创建地图容器

在页面body里你想展示地图的地方创建一个div 容器，并指定id标识:

4. 給地图容器指定大小

可以使用CSS为地图容器设置合适的大小，比如:

container {width:300px; height: 180px; }

5. 创建地图

如上准备工作完成之后，就可以开始创建地图了。生成一副简单地图只需要一句代码，将我们刚刚创建的div的id传给Map的构造函数即可，这个时候API将默认根据用户所在的城市自动进行地图中心点和级别的设定：

var map = new AMap.Map('container');

用到的代码

1. 添加考勤位置

    //初始化地图
    $scope.map = new AMap.Map('map-pannel',{
       zoom: 11,// 缩放级别
       scrollWheel:false,//鼠标滚动
       isHotspot: true,//热点可点击
    });
    //加载工具条
    $scope.map.plugin(["AMap.ToolBar"],function(){        
        var tool = new AMap.ToolBar();
        $scope.map.addControl(tool);
    });
    
    //定位到当前位置
    $scope.map.plugin('AMap.Geolocation', function() {
        var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000, //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition:'RB'
    });
    $scope.map.addControl(geolocation);
    geolocation.getCurrentPosition();

    // 搜索位置
    $scope.map.plugin(['AMap.PlaceSearch','AMap.Geocoder'],function(){
      //构造地点查询类
      var placeSearch = new AMap.PlaceSearch(); 
      //点击地图热点时，修改标记点，并获取位置信息
      $scope.map.on('hotspotclick', function(result){
          placeSearch.getDetails(result.id, function(status, result) {
              if (status === 'complete' && result.info === 'OK') {
                  var poi = result.poiList.pois[0];
                  $scope.marker.setMap($scope.map);
                  $scope.marker.setPosition(poi.location);
                  $scope.locationToAdd = {
                      name:poi.name,
                      longtitude:poi.location.lng,
                      latitude:poi.location.lat,
                      address:poi.address,
                      radius:200,
                  }
                  var geocoder = new AMap.Geocoder({});
                  geocoder.getAddress(poi.location, function(status, result) {
                  if (status === 'complete' && result.info === 'OK') {
                     $scope.locationToAdd.address = result.regeocode.addressComponent.province + result.regeocode.addressComponent.city + $scope.locationToAdd.address;
                     $scope.$apply();
                   }else{
                       $scope.$apply();
                   }
               });
            $scope.map.setCenter($scope.marker.getPosition());
            }
        });
    });
            //使用POI搜索UI组件
            AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
                var poiPicker = new PoiPicker({
                    //city:'北京',
                    input: 'tipinput'// 对应input ID
                });
                //初始化poiPicker
                poiPickerReady(poiPicker);
            });
            $scope.addAddressShow = true;
        }
        
        function poiPickerReady(poiPicker) {
            window.poiPicker = poiPicker;
            $scope.marker = new AMap.Marker();

            var infoWindow = new AMap.InfoWindow({
                offset: new AMap.Pixel(0, -20)
            });

            //选取了某个POI
            poiPicker.on('poiPicked', function(poiResult){
                var poi = poiResult.item;

                $scope.marker.setMap($scope.map);
                if(!poi.location){
                    toastr.info('您选取的不是一个地点','',{positionClass:'toast-center',timeOut:'1000'});
                    return;
                }
                $scope.marker.setPosition(poi.location);
                // 业务逻辑，添加考勤位置
                $scope.locationToAdd = {
                    name:poi.name,
                    longtitude:poi.location.lng,
                    latitude:poi.location.lat,
                    address:poi.district+poi.address,
                    radius:200,
                }
                $scope.$apply();
                $scope.map.setCenter($scope.marker.getPosition());//地图中心定位
            });
        };

image.png

image.png

2. 轨迹查询

$scope.draw = function(){
    $scope.map.clearMap();
    var lngX ;
    var latY ;
    var lineArr = new Array();
    //标记点UI
    AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {           
        var startPointer = $scope.pointList[0];
        var endPointer = $scope.pointList[$scope.pointList.length-1];
        //起点
        var startMarker =new SimpleMarker({
                //前景文字
                iconLabel: '起',
                //背景图标样式
                iconStyle: 'green',
                map:$scope.map,
                position:new AMap.LngLat(startPointer.longtitude,startPointer.latitude),//基点位置
                title:$scope.pointList[0].time,
            });
        //终点
        var endMarker = new SimpleMarker({
            //前景文字
            iconLabel: '终',
            //背景图标样式
            iconStyle: 'red',
            map:$scope.map,
            //draggable:true, //是否可拖动
            position:new AMap.LngLat(endPointer.longtitude,endPointer.latitude),//基点位置
            title:$scope.pointList[$scope.pointList.length-1].time,
        });
        //  如果起点终点重合、终点少量偏移
        if(startPointer.longtitude == endPointer.longtitude && startPointer.latitude == endPointer.latitude){
             endMarker.setOffset(new AMap.Pixel(-10,-43));
        }
   });
   //标记其他签到点
   for(var i = 0 ;i< $scope.pointList.length;i++){
       lngX = $scope.pointList[i].longtitude;
       latY = $scope.pointList[i].latitude;

       if($scope.pointList[i].punched && i > 0 && i < $scope.pointList.length-1){
           var marker = new AMap.Marker({
               map:$scope.map,
               position:new AMap.LngLat(lngX,latY),//基点位置
               title:$scope.pointList[i].time,
           });
       }
       lineArr.push(new AMap.LngLat(lngX,latY));
   }
   //绘制轨迹
   var polyline = new AMap.Polyline({
       map:$scope.map,
       path:lineArr,
       strokeColor:"#33c2ff",//线颜色
       strokeOpacity:1,//线透明度
       strokeWeight:4,//线宽
       strokeStyle:"solid",//线样式
   });
   $scope.map.setFitView();
};