高德地图API学习使用-JavaScript

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

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" >

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