https://lbs.amap.com/api/javascript-api/summary
1. 申請JSAPI的開發(fā)者Key
2. 在頁面中引入高德地圖JavaScript API入口腳本
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=您申請的key值"></script>
3. 創(chuàng)建地圖容器
在頁面body里你想展示地圖的地方創(chuàng)建一個div 容器，并指定id標(biāo)識:
<div id="container"></div>
4. 給地圖容器指定大小
可以使用CSS為地圖容器設(shè)置合適的大小，比如:
container {width:300px; height: 180px; }
5. 創(chuàng)建地圖
如上準(zhǔn)備工作完成之后，就可以開始創(chuàng)建地圖了。生成一副簡單地圖只需要一句代碼，將我們剛剛創(chuàng)建的div的id傳給Map的構(gòu)造函數(shù)即可，這個時候API將默認(rèn)根據(jù)用戶所在的城市自動進(jìn)行地圖中心點和級別的設(shè)定：
var map = new AMap.Map('container');
用到的代碼
1. 添加考勤位置
//初始化地圖
$scope.map = new AMap.Map('map-pannel',{
zoom: 11,// 縮放級別
scrollWheel:false,//鼠標(biāo)滾動
isHotspot: true,//熱點可點擊
});
//加載工具條
$scope.map.plugin(["AMap.ToolBar"],function(){
var tool = new AMap.ToolBar();
$scope.map.addControl(tool);
});
//定位到當(dāng)前位置
$scope.map.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默認(rèn):true
timeout: 10000, //超過10秒后停止定位，默認(rèn)：無窮大
buttonOffset: new AMap.Pixel(10, 20),//定位按鈕與設(shè)置的停靠位置的偏移量，默認(rèn)：Pixel(10, 20)
zoomToAccuracy: true, //定位成功后調(diào)整地圖視野范圍使定位位置及精度范圍視野內(nèi)可見，默認(rèn)：false
buttonPosition:'RB'
});
$scope.map.addControl(geolocation);
geolocation.getCurrentPosition();
// 搜索位置
$scope.map.plugin(['AMap.PlaceSearch','AMap.Geocoder'],function(){
//構(gòu)造地點查詢類
var placeSearch = new AMap.PlaceSearch();
//點擊地圖熱點時，修改標(biāo)記點，并獲取位置信息
$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'// 對應(yīng)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);
// 業(yè)務(wù)邏輯，添加考勤位置
$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();
//標(biāo)記點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: '起',
//背景圖標(biāo)樣式
iconStyle: 'green',
map:$scope.map,
position:new AMap.LngLat(startPointer.longtitude,startPointer.latitude),//基點位置
title:$scope.pointList[0].time,
});
//終點
var endMarker = new SimpleMarker({
//前景文字
iconLabel: '終',
//背景圖標(biāo)樣式
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));
}
});
//標(biāo)記其他簽到點
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();
};
