高德地图Javascript API常用功能实践

高德地图提供了功能强大的JavaScript API,能够帮助开发人员在Web或移动端中构建丰富、可交互性强的地图工具,包括基本地图功能接口、以及搜索、路线规划等数据服务接口,供开发者根据需要进行选择性使用。本博客撰写时最新版本为JavaScript API V1.3.13。
在高德地图开放平台上,官方已经为JS API提供了较为详尽的参考文档,因此本文不再对这些接口的具体语法进行逐一列举解读,而是通过几个最常用应用场景的实践,对这些功能的实现方案配合DEMO和完整的JS代码进行展示,并在后面附上了实践中所涉及知识点的官方文档链接。

1. 标记

1.1 应用场景

  • 设置默认标记
  • 设置自定义图片的标记
  • 设置自定义HTML内容的标记
  • 设置可以分级显示与隐藏(根据地图缩放级别)的标记

1.2 DEMO

DEMO

  • “设置默认标记”/“隐藏默认标记”:在华师设置(隐藏)一个高德地图默认的Marker。
  • “设置自定义标记”/“隐藏自定义标记”:在华工设置(隐藏)一个自定义图片标记(一只符合华工气质的doge)。
  • “设置Content标记”/“隐藏Content标记”:在华农洪泽湖设置(隐藏)一个自定义内容文本标记。
  • “设置分级标记”/“隐藏分级标记”:分别显示三所学校的人数(都是估计值,不要在意这种细节),而当点击每所学校的绿色标记时(DEMO中仅以华工做示例),将显示更详细的北区、东区、西区、南区的人数,而当地图的缩放级别小于15时,这些更详细的标记将重新隐藏。

1.3 涉及的文档

1.4 代码

  • HTML
  • CSS
  • JS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    var Event = {
    addHandler: function(element, type, handler){
    if (element.addHandlerListener){
    element.addHandlerListener(type, handler, false);
    } else if (element.attachEvent){
    element.attachEvent("on" + type, handler);
    } else {
    element["on" + type] = handler;
    }
    },
    };

    function $(name){
    return document.getElementById(name);
    };

    function newElm(ele){
    return document.createElement(ele);
    };

    (function(){
    var btnSetSimpleM = $("btn-setsimplem");
    var btnHideSimpleM = $("btn-hidesimplem");
    var btnSetCustomM = $("btn-setcustomm");
    var btnHideCustomM = $("btn-hidecustomm");
    var btnSetContentM = $("btn-setcontentm");
    var btnHideContentM = $("btn-hidecontentm");
    var btnSetDetailM = $("btn-setdetailm");
    var btnHideDetailM = $("btn-hidedetailm");

    var map = new AMap.Map('mapzone',{
    zoom: 14,
    center: [113.347718,23.151976]});
    var simplemarker = new AMap.Marker();
    var iconObj = new AMap.Icon({
    image: 'icon01.png', //24px*24px
    size: new AMap.Size(24,24)
    });
    var custommarker = new AMap.Marker({
    offset : new AMap.Pixel(-12,-12)
    });
    var content = "<div class='contentmarker'>华农洪泽湖</div>";
    var contentmarker = new AMap.Marker({
    title: "华农洪泽湖"
    });

    var dataWushan = [{
    "name": "华南理工大学",
    "center": "113.349166,23.155631",
    "count": 27000,
    "subDistricts": [{
    "name": "华工东区",
    "center": "113.34878,23.153343",
    "count": 5000
    }, {
    "name": "华工西区",
    "center": "113.342214,23.152672",
    "count": 10000
    }, {
    "name": "华工南区",
    "center": "113.343244,23.148489",
    "count": 500
    }, {
    "name": "华工北区",
    "center": "113.341656,23.162102",
    "count": 11500
    }]
    }, {
    "name": "华南农业大学",
    "center": "113.354187,23.15938",
    "count": 38000,
    "subDistricts": []
    }, {
    "name": "华南师范大学",
    "center": "113.347428,23.142629",
    "count": 12500,
    "subDistricts": []
    }];
    var detailmarkers = new Array;

    function createMarker(data,hide) {
    var div = document.createElement('div');
    div.className = 'circle';
    div.style.backgroundColor = "#339933";
    div.innerHTML = data.name+"<br>"+data.count || 0;
    var marker = new AMap.Marker({
    content: div,
    title: data.name,
    position: data.center.split(','),
    offset: new AMap.Pixel(-30, 5),
    zIndex: data.count
    });
    marker.subMarkers = [];
    if(data.name==='华南理工大学'){
    marker.setLabel({content:'←请点击',offset:new AMap.Pixel(90,0)})
    map.setCenter(marker.getPosition());
    }
    if(!hide){
    marker.setMap(map)
    }
    if(data.subDistricts&&data.subDistricts.length){
    for(var i = 0 ; i<data.subDistricts.length;i+=1){
    marker.subMarkers.push(createMarker(data.subDistricts[i],true));
    }
    }
    return marker;
    }

    function zoomEnd() {
    if (map.getZoom() < 15) {
    for (var i = 0; i < detailmarkers.length; i += 1) {
    map.remove(detailmarkers[i].subMarkers)
    }
    map.add(detailmarkers);
    }
    }

    function openSubMarkers(elm) {
    if(elm.target.subMarkers.length){
    map.add(elm.target.subMarkers);
    map.setFitView(elm.target.subMarkers);
    map.remove(markers)
    }
    }

    Event.addHandler(btnSetSimpleM,"click",function(){
    simplemarker.setMap(map);
    simplemarker.setPosition([113.35099,23.139689]);
    })

    Event.addHandler(btnHideSimpleM,"click",function(){
    simplemarker.setMap();
    })

    Event.addHandler(btnSetCustomM,"click",function(){
    custommarker.setMap(map);
    custommarker.setIcon(iconObj);
    custommarker.setPosition([113.347718,23.151976]);
    })

    Event.addHandler(btnHideCustomM,"click",function(){
    custommarker.setMap();
    })

    Event.addHandler(btnSetContentM,"click",function(){
    contentmarker.setMap(map);
    contentmarker.setContent(content);
    contentmarker.setPosition([113.352374,23.1557]);
    contentmarker.setOffset(new AMap.Pixel(-10,0));
    })

    Event.addHandler(btnHideContentM,"click",function(){
    contentmarker.setMap();
    })

    Event.addHandler(btnSetDetailM,"click",function(){
    for (var i = 0; i < dataWushan.length; i++) {
    var marker = createMarker(dataWushan[i]);
    detailmarkers.push(marker);
    AMap.event.addListener(marker, 'click', openSubMarkers);
    }
    AMap.event.addListener(map, 'zoomend', zoomEnd);
    })

    Event.addHandler(btnHideDetailM,"click",function(){
    for (var i = 0; i < detailmarkers.length; i++) {
    detailmarkers[i].setMap();
    }
    detailmarkers = [];
    })

    })();

2. 图层

2.1 应用场景

  • 显示实时路况
  • 显示路网
  • 显示卫星图
  • 显示地图模式切换控件
  • 显示鹰眼
  • 显示工具条
  • 显示比例尺
  • 显示定位插件
  • 开启鼠标标记模式(鼠标在地图上点击时可以添加Marker)
  • 开启鼠标测量模式(如测距等)
  • 开启拖曳导航(根据起、经、终点规划线路)

2.2 DEMO

DEMO

  • “放大至18级”/“恢复至15级”:缩放可以由滚轮控制,也可以人为指定缩放级别
  • “显示路况”/“隐藏路况”:显示(隐藏)实时路况信息
  • “显示路网”/“隐藏路网”:显示(隐藏)路网信息
  • “显示卫星图”/“隐藏卫星图”:显示(隐藏)卫星图(实际上是在2D地图上覆盖了一个卫星图图层)
  • “显示模式切换器”/“隐藏模式切换器”:显示(隐藏)地图模式切换控件,同时将默认模式设置为2D地图模式(默认值可以通过参数调整),路况、路网、卫星图这三个图层实际上可以通过这个内置的控件由用户自由切换。
  • “显示鹰眼”/“隐藏鹰眼”:显示(隐藏)鹰眼
  • “显示工具条”/“隐藏工具条”:显示(隐藏)工具条(“鱼骨”控件)
  • “显示比例尺”/“隐藏比例尺”:显示(隐藏)比例尺
  • “显示定位插件”/“隐藏定位插件”:显示(隐藏)定位插件,点击定位按钮后可以获取当前位置,并将地图显示范围自动移动至定位到的坐标。
  • “显示比例尺”/“隐藏比例尺”:显示(隐藏)比例尺
  • “开启鼠标标记模式”/“关闭鼠标标记模式”:开启(关闭)鼠标标记模式,开启时,鼠标在地图上点击时可以在相应的位置插入新的Marker。
  • “开启测量插件”/“关闭测量插件”:开启(关闭)鼠标测量插件,开启时,鼠标在地图上点击时可以指定一系列节点,测量总距离。测距只是测量功能的其中一种,其他测量功能可以参考开发文档。
  • “开启拖曳导航”/“隐藏拖曳导航”:开启(关闭)拖曳导航,开启时,可以根据地图上指定的起、经、终点规划线路,DEMO中默认设计了一条从中山立交桥底、经石牌东路到天河东路的驾车路线(还可以设计步行或公交路线),其中“起”、“经”、“终”三个锚点都是可以拖曳的,拖曳后路线规划将实时刷新。

2.3 涉及的文档

2.4 代码

  • HTML
  • CSS
  • JS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    var Event = {
    addHandler: function(element, type, handler){
    if (element.addHandlerListener){
    element.addHandlerListener(type, handler, false);
    } else if (element.attachEvent){
    element.attachEvent("on" + type, handler);
    } else {
    element["on" + type] = handler;
    }
    },
    };

    function $(name){
    return document.getElementById(name);
    };

    function newElm(ele){
    return document.createElement(ele);
    };

    (function(){
    var btnZoomIn = $("btn-zoomin");
    var btnZoomOut = $("btn-zoomout");
    var btnSetTraffic = $("btn-settraffic");
    var btnHideTraffic = $("btn-hidetraffic");
    var btnSetSate = $("btn-setsate");
    var btnHideSate = $("btn-hidesate");
    var btnSetRoad = $("btn-setroad");
    var btnHideRoad = $("btn-hideroad");
    var btnSetModeCtrler = $("btn-setmodectrler");
    var btnHideModeCtrler = $("btn-hidemodectrler");
    var btnSetOverView = $("btn-setoverview");
    var btnHideOverView = $("btn-hideoverview");
    var btnSetTBar = $("btn-settbar");
    var btnHideTBar = $("btn-hidetbar");
    var btnSetScale = $("btn-setscale");
    var btnHideScale = $("btn-hidescale");
    var btnSetGeoloc = $("btn-setgeoloc");
    var btnHideGeoloc = $("btn-hidegeoloc");
    var geolocResult = $('geoloc-result');
    var btnSetMouseTool = $("btn-setmousetool");
    var btnHideMouseTool = $("btn-hidemousetool");
    var btnSetRanging = $("btn-setranging");
    var btnHideRanging = $("btn-hideranging");
    var btnSetDragRoute = $("btn-setdragroute");
    var btnHideDragRoute = $("btn-hidedragroute");

    var map = new AMap.Map('mapzone',{
    zoom: 15,
    center: [113.339338,23.134376]});
    var trafficLayer = new AMap.TileLayer.Traffic();
    var sateLayer = new AMap.TileLayer.Satellite();
    var roadLayer = new AMap.TileLayer.RoadNet();
    var plugins = ["AMap.MapType","AMap.OverView","AMap.Scale","AMap.ToolBar","AMap.Geolocation",
    "AMap.MouseTool","AMap.RangingTool","AMap.DragRoute"];

    map.plugin(plugins,function(){
    var modeCtrler = new AMap.MapType({defaultType:0});
    var overView = new AMap.OverView();
    var tbar = new AMap.ToolBar();
    var scale = new AMap.Scale();
    var geoloc = new AMap.Geolocation({
    enableHighAccuracy: true,//是否使用高精度定位,默认:true
    timeout: 10000, //超过10秒后停止定位,默认:无穷大
    maximumAge: 0, //定位结果缓存0毫秒,默认:0
    convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
    showButton: true, //显示定位按钮,默认:true
    buttonPosition: 'RB', //定位按钮停靠位置,默认:'LB',左下角
    buttonOffset: new AMap.Pixel(0, 0),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
    showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
    showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true
    panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true
    zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
    });
    var mousetool = new AMap.MouseTool(map);
    var ruler = new AMap.RangingTool(map);
    var pathway = new Array;
    pathway.push(new AMap.LngLat(113.351966,23.135634));
    pathway.push(new AMap.LngLat(113.342986,23.133217));
    pathway.push(new AMap.LngLat(113.333899,23.128846));
    var route = new AMap.DragRoute(map, pathway, AMap.DrivingPolicy.LEAST_FEE);

    Event.addHandler(btnSetModeCtrler,"click",function(){
    map.addControl(modeCtrler);
    })
    Event.addHandler(btnHideModeCtrler,"click",function(){
    map.removeControl(modeCtrler);
    })

    Event.addHandler(btnSetOverView,"click",function(){
    map.addControl(overView);
    })
    Event.addHandler(btnHideOverView,"click",function(){
    map.removeControl(overView);
    })

    Event.addHandler(btnSetTBar,"click",function(){
    map.addControl(tbar);
    })
    Event.addHandler(btnHideTBar,"click",function(){
    map.removeControl(tbar);
    })

    Event.addHandler(btnSetScale,"click",function(){
    map.addControl(scale);
    })
    Event.addHandler(btnHideScale,"click",function(){
    map.removeControl(scale);
    })

    Event.addHandler(btnSetGeoloc,"click",function(){
    map.addControl(geoloc);
    AMap.event.addListener(geoloc, 'complete', onComplete);
    AMap.event.addListener(geoloc, '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 ? '是' : '否'));
    geolocResult.innerHTML = str.join('<br>');
    }
    function onError(data) {
    geolocResult.innerHTML = '定位失败';
    }
    })
    Event.addHandler(btnHideGeoloc,"click",function(){
    map.removeControl(geoloc);
    geolocResult.innerHTML = '';
    })

    Event.addHandler(btnSetMouseTool,"click",function(){
    map.addControl(mousetool);
    mousetool.marker();
    })
    Event.addHandler(btnHideMouseTool,"click",function(){
    mousetool.close(true);
    })

    Event.addHandler(btnSetRanging,"click",function(){
    map.addControl(ruler);
    ruler.turnOn();
    })
    Event.addHandler(btnHideRanging,"click",function(){
    ruler.turnOff();
    map.removeControl(ruler);
    })

    Event.addHandler(btnSetDragRoute,"click",function(){
    route.search();
    })
    Event.addHandler(btnHideDragRoute,"click",function(){
    route.destroy();
    })
    });

    Event.addHandler(btnZoomIn,"click",function(){
    map.setCenter([113.339338,23.134376]);
    map.setZoom(18);
    })

    Event.addHandler(btnZoomOut,"click",function(){
    map.setCenter([113.339338,23.134376]);
    map.setZoom(15);
    })

    Event.addHandler(btnSetTraffic,"click",function(){
    trafficLayer.setMap(map);
    })

    Event.addHandler(btnHideTraffic,"click",function(){
    trafficLayer.setMap();
    })

    Event.addHandler(btnSetSate,"click",function(){
    sateLayer.setMap(map);
    })

    Event.addHandler(btnHideSate,"click",function(){
    sateLayer.setMap();
    })

    Event.addHandler(btnSetRoad,"click",function(){
    roadLayer.setMap(map);
    })

    Event.addHandler(btnHideRoad,"click",function(){
    roadLayer.setMap();
    })

    })();

3. 信息窗体

3.1 应用场景

  • 显示默认信息窗体
  • 显示包装了“在附近找”、“这里出发”、“到这里去”等功能的高级信息窗体
  • 设置信息窗体与Marker的交互,在点击Marker时显示相应的窗体。

3.2 DEMO

DEMO

  • “设置默认标记”/“隐藏默认标记”:在岗顶百脑汇设置(隐藏)一个高德地图默认的Marker。
  • “设置信息窗体”/“隐藏信息窗体”:在相同位置创建一个默认窗体,内容是百脑汇和其地址,设置后需要点击上一条中所述的Marker才能打开。
  • “设置高级信息窗体”/“隐藏高级信息窗体”:在暨大北门打开一个内容为“BRT师大暨大站”的高级信息窗体,其中包装了“在附近找”、“这里出发”、“到这里去”三种功能,及驾车、公交步行三种路线规划策略的高级信息窗体。

3.3 涉及的文档

3.4 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
var Event = {
addHandler: function(element, type, handler){
if (element.addHandlerListener){
element.addHandlerListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
};

function $(name){
return document.getElementById(name);
};

function newElm(ele){
return document.createElement(ele);
};

(function(){
var btnSetMarker = $("btn-setmarker");
var btnHideMarker = $("btn-hidemarker");
var btnSetInfoWin = $("btn-setinfowin");
var btnHideInfoWin = $("btn-hideinfowin");
var btnSetAdvWin = $("btn-setadvwin");
var btnHideAdvWin = $("btn-hideadvwin");

var map = new AMap.Map('mapzone',{
zoom: 15,
center: [113.339338,23.134376]});
var marker = new AMap.Marker();
var infowindow = new AMap.InfoWindow();

AMap.plugin('AMap.AdvancedInfoWindow',function(){
var advwindow = new AMap.AdvancedInfoWindow({
content: '<h3 class="advinfo-title">暨大北门</h3>'+
'<div class="advinfo-content">BRT师大暨大站</div>',
});
Event.addHandler(btnSetAdvWin,"click",function(){
advwindow.open(map,new AMap.LngLat(113.34555,23.136251));
})
Event.addHandler(btnHideAdvWin,"click",function(){
advwindow.close();
})
})

Event.addHandler(btnSetMarker,"click",function(){
marker.setMap(map);
marker.setPosition([113.339338,23.134376]);
})

Event.addHandler(btnHideMarker,"click",function(){
marker.setMap();
})

Event.addHandler(btnSetInfoWin,"click",function(){
infowindow.setSize(new AMap.Size(150,50));
var contentDiv = document.createElement('div');
contentDiv.innerHTML=
'<div class="infowin"><h3>百脑汇</h3>
<p>天河区天河路590号(岗顶总统大酒店旁)</p></div>';
infowindow.setContent(contentDiv);
infowindow.setOffset(new AMap.Pixel(0, -20));
var clickHandle = AMap.event.addListener(marker, 'click', function() {
infowindow.open(map, marker.getPosition());})
})

Event.addHandler(btnHideInfoWin,"click",function(){
infowindow.close();
})

})();

4. 搜索

4.1 应用场景

  • 显示全市范围内某关键词的搜索结果
  • 显示坐标附近某关键词的搜索结果
  • 提供搜索框控件(带输入提示功能)

4.2 DEMO

DEMO

  • “显示搜索(附近)”:以“医院”为关键词搜索岗顶附近2km的范围,显示第1~10个结果。
  • “显示搜索(全市)”:以“医院”为关键词搜索广州市,显示第1~10个结果。
  • “隐藏搜索”:隐藏上述搜索结果。
  • “显示搜索框”/“隐藏搜索框”:显示(隐藏)一个带有输入提示功能的搜索框。

4.3 涉及的文档

4.4 代码

  • HTML
  • CSS
  • JS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    var Event = {
    addHandler: function(element, type, handler){
    if (element.addHandlerListener){
    element.addHandlerListener(type, handler, false);
    } else if (element.attachEvent){
    element.attachEvent("on" + type, handler);
    } else {
    element["on" + type] = handler;
    }
    },
    };

    function $(name){
    return document.getElementById(name);
    };

    function newElm(ele){
    return document.createElement(ele);
    };

    (function(){
    var btnSetSearchCity = $("btn-setsearchcity");
    var btnSetSearchNb = $("btn-setsearchnb");
    var btnHideSearch = $("btn-hidesearch");
    var btnSetSearchBox = $("btn-setsearchbox");
    var btnHideSearchBox = $("btn-hidesearchbox");
    var searchBox = $("searchbox");

    var map = new AMap.Map('mapzone',{
    zoom: 15,
    center: [113.339338,23.134376]});

    AMap.service(["AMap.PlaceSearch"], function() {
    var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
    pageSize: 10, //单页显示结果条数
    pageIndex: 1, //页码
    city: "广州",
    map: map
    });
    var nearbycenter = [113.339338,23.134376];

    Event.addHandler(btnSetSearchCity,"click",function(){
    placeSearch.search('医院', function(status, result){});
    })
    Event.addHandler(btnSetSearchNb,"click",function(){
    placeSearch.searchNearBy('医院', nearbycenter, 2000, function(status, result){});
    })
    Event.addHandler(btnHideSearch,"click",function(){
    placeSearch.clear();
    })
    })

    AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
    var autoOptions = {
    city: "广州", //城市,默认全国
    input: "keyword"//使用联想输入的input的id
    };
    autocomplete= new AMap.Autocomplete(autoOptions);
    var placeSearchPoi = new AMap.PlaceSearch({
    city: "广州",
    map: map
    })
    AMap.event.addListener(autocomplete, "select", function(elm){
    //TODO 针对选中的poi实现自己的功能
    placeSearchPoi.search(elm.poi.name)
    });
    })

    Event.addHandler(btnSetSearchBox,"click",function(){
    searchBox.style.display = "block";
    })
    Event.addHandler(btnHideSearchBox,"click",function(){
    searchBox.style.display = "none";
    })
    })();

5. 路线规划

5.1 应用场景

  • 提供起终点输入框(带输入提示功能),根据选定的起终点,规划公交/自驾/步行路线,并将规划结果反馈给用户

5.2 DEMO

DEMO

  • 在左上角设置了起终点输入框,带输入提示功能,结果反馈栏设在地图右方
  • “规划公交路线”:根据选中的起点和终点,规划公交换乘路线。
  • “规划自驾路线”:根据选中的起点和终点,规划自驾路线。
  • “规划步行路线”:根据选中的起点和终点,规划步行路线。

5.3 涉及的文档

5.4 代码

  • HTML
  • CSS
  • JS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    var Event = {
    addHandler: function(element, type, handler){
    if (element.addHandlerListener){
    element.addHandlerListener(type, handler, false);
    } else if (element.attachEvent){
    element.attachEvent("on" + type, handler);
    } else {
    element["on" + type] = handler;
    }
    },
    };

    function $(name){
    return document.getElementById(name);
    };

    function newElm(ele){
    return document.createElement(ele);
    };

    (function(){
    var btnPlanTransfer = $("btn-plantransfer");
    var btnPlanDrive = $("btn-plandrive");
    var btnPlanWalk = $("btn-planwalk");
    var boxFrom = $("box-from");
    var boxTo = $("box-to");

    var map = new AMap.Map('mapzone',{
    zoom: 10,
    center: [113.339338,23.134376]});

    AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
    var autoOptionsFrom = {
    city: "广州", //城市,默认全国
    input: "keyword-from"//使用联想输入的input的id
    };
    var autoOptionsTo = {
    city: "广州", //城市,默认全国
    input: "keyword-to"//使用联想输入的input的id
    };
    var placeFrom, placeTo;
    autocompleteFrom= new AMap.Autocomplete(autoOptionsFrom);
    autocompleteTo= new AMap.Autocomplete(autoOptionsTo);
    AMap.event.addListener(autocompleteFrom, "select", function(elm){
    //TODO 针对选中的poi实现自己的功能
    placeFrom = elm.poi.name;
    });
    AMap.event.addListener(autocompleteTo, "select", function(elm){
    placeTo = elm.poi.name;
    });
    AMap.service(["AMap.Driving","AMap.Walking","AMap.Transfer"], function() {
    var driving = new AMap.Driving({
    map: map,
    panel: "panel"
    });
    var walking = new AMap.Walking({
    map: map,
    panel: "panel"
    });
    var transfer = new AMap.Transfer({
    map: map,
    city: "广州市",
    panel: "panel",
    policy: AMap.TransferPolicy.LEAST_TIME
    });
    Event.addHandler(btnPlanDrive,"click",function(){
    transfer.clear();
    walking.clear();
    driving.search(
    [{keyword: placeFrom},{keyword: placeTo}],
    function(status, result){}
    );
    })
    Event.addHandler(btnPlanTransfer,"click",function(){
    driving.clear();
    walking.clear();
    transfer.search(
    [{keyword: placeFrom},{keyword: placeTo}],
    function(status, result){}
    );
    })
    Event.addHandler(btnPlanWalk,"click",function(){
    driving.clear();
    transfer.clear();
    walking.search(
    [{keyword: placeFrom},{keyword: placeTo}],
    function(status, result){}
    );
    })
    })
    })
    })();

6. 逆地理编码

6.1 应用场景

  • 根据用户在地图上点击的位置,返回经纬度(GCJ-02坐标,即火星坐标)及地址。

6.2 DEMO

DEMO

  • 在地图上点击任意位置,可添加一个Marker,并在下面的坐标栏和地址栏分别显示该处的经纬度及地址。

6.3 涉及的文档

6.4 代码

  • HTML
  • CSS
  • JS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    var Event = {
    addHandler: function(element, type, handler){
    if (element.addHandlerListener){
    element.addHandlerListener(type, handler, false);
    } else if (element.attachEvent){
    element.attachEvent("on" + type, handler);
    } else {
    element["on" + type] = handler;
    }
    },
    };

    function $(name){
    return document.getElementById(name);
    };

    function newElm(ele){
    return document.createElement(ele);
    };

    (function(){
    var boxAddress = $("box-address");
    var boxCoordinate = $("box-coordinate");

    var map = new AMap.Map('mapzone',{
    zoom: 14,
    center: [113.347718,23.151976]});
    AMap.event.addListener(map,'click',getCoordinate);

    function getCoordinate(elm){
    map.clearMap();
    var x = elm.lnglat.getLng();
    var y = elm.lnglat.getLat();
    boxCoordinate.value = x + "," + y;
    coordinate = new AMap.LngLat(x,y);
    map.plugin(["AMap.Geocoder"], function() {
    var geocoder = new AMap.Geocoder({
    city: "广州"
    });
    var marker = new AMap.Marker({
    map:map,
    position: coordinate,
    });
    geocoder.getAddress(coordinate,function(status,result){
    boxAddress.value = result.regeocode.formattedAddress;
    });
    map.setCenter(marker.getPosition())
    });
    }
    })();
Qinsman wechat
关注我的公众号,一个卖馒头,也卖故事的地方:)