https://lbs.amap.com/api/javascript-api/summary
1. 申请JSAPI的开发者Key
2. 在页面中引入高德地图JavaScript API入口脚本
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=您申请的key值"></script>
3. 创建地图容器
在页面body里你想展示地图的地方创建一个div 容器，并指定id标识:
<div id="container"></div>
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();
};
