dev_map
本次开发完全使用高德提供的API，实现移动端的地图显示，当前位置地图定位，给定坐标点数组Marker标记，实时动态轨迹绘制
###具体使用方法 ####1.成为高德开发者，获取高德key
登录高德开发平台官网 http://lbs.amap.com/ 注册一个高德账号，注册成功后登录，点击右上角进入控制台，然后创建新的应用，选择你的应用类型，获得key值
####2.加载高德地图API
引入js,css只需像普通js文件和css文件一样就行，不过高德的路径是个URL，不在本地，下面就是一个基本的地图显示用例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> //兼容IE8
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> //更好的在手机端适配
<title>基本地图展示</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/> //引入的地图css
<script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script> //把申请的key值换掉
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script> //引入的地图css
</head>
<body>
<div id="container"></div> //地图盒子 不设宽高就是全屏显示
<script>
var map = new AMap.Map('container', { //显示地图
resizeEnable: true, //是否支持缩放
zoom:11, //缩放比例
center: [116.397428, 39.90923] //地图中心
});
</script>
</body>
</html>
####3.在地图里添加不同控件
AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView','AMap.MapType'],
function(){
map.addControl(new AMap.ToolBar()); //添加工具条
map.addControl(new AMap.Scale()); //添加比例尺
map.addControl(new AMap.OverView({isOpen:true})); //添加鹰眼
map.addControl(new AMap.MapType()); //添加卫星地图和平面图切换 路况
});
####4.地图定位当前位置
map.plugin('AMap.Geolocation', function() { //定位参数AMap.Geolocation和添加控件都写在一个数组里，与添加控件原理相同
geolocation = new AMap.Geolocation({ //下面参数可根据需要增加或减少
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：无穷大
maximumAge: 0, //定位结果缓存0毫秒，默认：0
convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, //显示定位按钮，默认：true
buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
});
map.addControl(geolocation);
geolocation.getCurrentPosition(); //获得当前位置
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
//解析定位结果
function onComplete(data) {
var str=['定位成功'];
str.push('经度：' + data.position.getLng());
str.push('纬度：' + data.position.getLat());
str.push('精度：' + data.accuracy + ' 米');
str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
document.getElementById('tip').innerHTML = str.join('<br>');
}
//解析定位错误信息
function onError(data) {
document.getElementById('tip').innerHTML = '定位失败';
}
####5.根据给定不同点的经纬度，在地图上标注
map.clearMap(); //首先清除地图覆盖物
var markers = [{ //给定标记的点的集合
icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png', //标注的图片，可自定义本地设置
position: [116.205467, 39.907761] //需要标注的经纬度
}, {
icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b2.png',
position: [116.368904, 39.913423]
}, {
icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b3.png',
position: [116.305467, 39.807761]
}];
// 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
markers.forEach(function(marker) { //对标注点遍历
new AMap.Marker({
map: map,
icon: marker.icon,
position: [marker.position[0], marker.position[1]],
offset: new AMap.Pixel(-12, -36) //偏移位置
});
});
####6.一个完整的地图包含定位，添加几个工具条，位置标注，代码如下
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/font-icons.css">
<link rel="stylesheet" href="css/iuapmobile.um.css">
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<style>
.amap-touch-toolbar .amap-zoomcontrol{
bottom:-30px;
right:0px;
}
</style>
<script src="js/Frameworks/iuapmobile.frameworks.core.js" ></script>
<script src="js/summer.js" ></script>
<script src="js/jquery.min.js" ></script>
<script src="js/Frameworks/iuapmobile.frameworks.ui.js" ></script>
<script src="js/index.js" ></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=d13df96ab37812514b272b0d34a25092</script>//此处 引用高德插件，须带上开发key,请自行替换
</head>
<body>
<div class="um-win" id="index">
<div id="header" class="um-header">
<a href="#" class="um-back">返回</a>
<h3>标题</h3>
<a href="#" class="um-header-right ti-plus f20"></a>
</div>
<div id="main" class="um-content p15">
<div id="container"></div>
<div class="button-group">
<input type="button" class="button mr20" value="删除多个点标记" id="clearMarker"/>
</div>
</div>
</div>
<script>
$(function() {
$('#container').parent().css('position','relative');
var map, geolocation,scale,toolbar;
//加载地图，调用浏览器定位服务
map = new AMap.Map('container', {
resizeEnable: true,
zoom:11,
});
map.plugin(['AMap.Geolocation','AMap.Scale','AMap.ToolBar', 'AMap.MapType'], function() { //添加定位控件
geolocation = new AMap.Geolocation({ //定位设置
enableHighAccuracy: true,//是否使用高精度定位，默认:true
convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
timeout: 10000, //超过10秒后停止定位，默认：无穷大
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
buttonPosition:'RB',
});
scale=new AMap.Scale(); //添加比例尺控件
toolbar=new AMap.ToolBar(); //添加工具栏控件
maptype=new AMap.MapType();
map.addControl(geolocation);
map.addControl(scale);
map.addControl(toolbar);
map.addControl(maptype);
geolocation.getCurrentPosition();
});
map.clearMap(); // 清除地图覆盖物
var markers = [{ //标记位置
icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
position: [116.205467, 39.907761]
}, {
icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b2.png',
position: [116.368904, 39.913423]
}, {
icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b3.png',
position: [116.305467, 39.807761]
}];
// 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
var objMarker=[];
markers.forEach(function(marker) {
var marker=new AMap.Marker({
map: map,
icon: marker.icon,
position: [marker.position[0], marker.position[1]],
offset: new AMap.Pixel(-12, -36) //偏移位置
});
objMarker.push(marker);
});
AMap.event.addDomListener(document.getElementById('clearMarker'), 'click', function() {
map.remove(objMarker);
}, false);
});
</script>
</body>
</html>
