可以参考官网实例文档学习
1.引入地图插件 高德地图——申请Key步骤
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你申请的key值&"></script>
2.编写地图容器(记得给容器寛高)
<div id="container" class="col-md-9" style="height:600px"></div>
<div id="panel" class="col-md-3"style="height:600px;overflow:auto;float:right"></div>
3.初始化地图
var map = new AMap.Map('container', {
resizeEnable: true,
zoom:13,
center: [104.078132,30.658462],//地图中心点
});
做完以上操作就实现地图载入了,效果如下:
下面做一些基础操作
1.加载地图控件
//地图控件
AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView'],
function(){
map.addControl(new AMap.ToolBar());
map.addControl(new AMap.Scale());
map.addControl(new AMap.OverView({isOpen:true}));
});
效果如下:
2.输入提示:
//html
<input type="text" class="form-control" id="start" >
//js
AMap.plugin('AMap.Autocomplete',function(){//回调函数
//实例化Autocomplete
var autoOptions = {
city: "成都市", //城市,默认全国
input:"start"//使用联想输入的input的id
};
autocomplete= new AMap.Autocomplete(autoOptions);
//TODO: 使用autocomplete对象调用相关功能
})
效果如下:
3.按关键字搜索地址
<form class="form-inline" style="border-bottom: 2px solid #ebebeb;">
<div class="form-group">
<label >关键字</label>
<input type="text" class="form-control" id="keyword" placeholder="例如:四川大学">
</div>
<button type="button" class="btn btn-primary" style ="background-color:#3385ff;" id="query2">搜索</button>
</form>
//地点搜索
$('#query2').on('click', function () {
AMap.service(["AMap.PlaceSearch"], function() {
var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
pageSize: 5,
pageIndex: 1,
city: "成都市", //城市
map: map,
panel: "panel"
});
//关键字查询
placeSearch.search($('#keyword').val());
});
})
效果如下:
4. 路线规划
包含 驾车路线规划、骑行路线规划、步行路线规划、公交查询,这里使用公交查询
需要引入对应JS构造类
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的key值&plugin=AMap.Driving,AMap.Riding,AMap.Walking"></script>
<form class="form-inline" style="border-bottom: 3px solid #ebebeb;">
<div class="form-group">
<label >起始地</label>
<input type="text" class="form-control" id="start" placeholder="">
</div>
<div class="form-group">
<label >结束地</label>
<input type="text" class="form-control" id="end" placeholder="">
</div>
<button type="button" class="btn btn-primary" style ="background-color:#3385ff;" id="query">搜索</button>
</form>
$('#query').on('click', function () {
clearMapInfo();
/*
* 调用公交换乘服务
*/
//加载公交换乘插件
AMap.service(["AMap.Transfer"], function() {
var transOptions = {
map: map,
city: "成都市", //公交城市
panel: "panel",
//cityd:'乌鲁木齐',
policy: AMap.TransferPolicy.LEAST_TIME //乘车策略
};
//构造公交换乘类
trans = new AMap.Transfer(transOptions);
//根据起、终点坐标查询公交换乘路线
trans.search([{keyword:$('#start').val()},{keyword: $('#end').val()}], function(status, result){
});
});
})
//清除上一次搜索信息
function clearMapInfo() {
if(trans){
trans.clear();
}
}
效果如下:
5.定位服务
//定位服务
AMap.plugin('AMap.Geolocation', function () {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:无穷大
maximumAge: 0, //定位结果缓存0毫秒,默认:0
convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
showButton: true, //显示定位按钮,默认:true
buttonPosition: 'RT', //定位按钮停靠位置,默认:'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); //返回定位出错信息
});