android高德 自定义APSService 高德api教程

可以参考官网实例文档学习

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);      //返回定位出错信息
            });