高德地图javascriptapi加载多个插件-JavaScript教程
当前位置：&>&&>& &
高德地图javascriptapi加载多个插件
高德地图javascriptapi加载多个插件
|　来源:网络 | 关键字：
高德地图javascriptapi提供以js形式调用api,确实给我们开发者带来了许多方便,但是在使用过程中发现需要使用高德的多个插件，自己试了很久，只能加载一种插件，如果同时其他地方使用其他插件，不能使用。调用api如下:/maps?v=1.3&key=您申请的key值&plugin=AMap.Transfer?在官网找
高德地图javascript api提供以js形式调用api,确实给我们开发者带来了许多方便,但是在使用过程中发现需要使用高德的多个插件，自己试了很久，只能加载一种插件，如果同时其他地方使用其他插件，不能使用。调用api如下:
/mapsv=1.3&key=您申请的key值&plugin=AMap.Transfer
在官网找了很久，总算发现加载多个插件的方式了,在plugin后面多个插件名称以逗号分隔，如下:
/mapsv=1.3&key=您申请的key值&plugin=AMap.PolyEditor,AMap.CircleEditor
无相关信息
网友评论仅供其表达个人看法，并不表明网易立场。web应用使用高德地图效果不错。 -
- ITeye技术网站
1.高德地图的API很详细，很容易自定义自己的地图。
&%@ page language="java" import="java.util.*"& contentType="text/ charset=UTF-8"%&
&%@ taglib prefix="s" uri="/struts-tags"%&
&%@ taglib prefix="c" uri="/jsp/jstl/core" %&
&%@ taglib prefix="fn" uri="/jsp/jstl/functions" %&
&%@ taglib prefix="fmt" uri="/jsp/jstl/fmt"%&
&%@ taglib uri="/WEB-INF/paginator.tld" prefix="paginator"%&
String path = request.getContextPath();
String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%&
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
&&&&&&& "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&head&
&&& &meta http-equiv="Content-Type" content="text/ charset=utf-8"/&
&&& &title&关键字搜索&/title&
&&& &script language="javascript" src="/maps?v=1.2&key=22f12599eefb22c66b2d0"&&/script&
&&& &link href="&%=path %&/css/fence.css" rel="stylesheet" type="text/css"/&
&&& &script language="javascript"&
&&&&&&& var mapObj, toolbar, overview, scale,
&&&&&&& var date, startT
&&&&&&& var initx = window.opener.document.getElementById("positionx").
&&&&&&& var inity = window.opener.document.getElementById("positiony").
&&&&&&& function mapInit() {
&&&&&&&
//var opt="";
&&&&&&&
//if(initx == ""){
&&&&&&&
// opt = {
&&&&&&&&& //&&&&& level:13, //设置地图缩放级别
&&&&&&&&&&&&&&& //center:new AMap.LngLat(initx, inity), //设置地图中心点
&&&&&&&&& //&&&&& doubleClickZoom:true, //双击放大地图
&&&&&&&&& //&&&&& scrollWheel:true//鼠标滚轮缩放地图
&&&&&&&&&&& // }
&&&&&&&
//}else{
&&&&&&&
var opt = {
&&&&&&&&&&&&&&& level:13, //设置地图缩放级别
&&&&&&&&&&&&&&& //center:new AMap.LngLat(initx, inity), //设置地图中心点
&&&&&&&&&&&&&&& doubleClickZoom:false, //双击放大地图
&&&&&&&&&&&&&&& scrollWheel:true//鼠标滚轮缩放地图
&&&&&&&&&&&
//}
&&&&&&&&&
&&&&&&&&&&&& var GeocoderOption = {
range: 3000, //范围
crossnum: 2, //道路交叉口数
roadnum: 3, //路线记录数
poinum: 2//POI点数
geo = new AMap.Geocoder(GeocoderOption);
&&&&&&&&&&& mapObj = new AMap.Map("iCenter", opt);AMap.Conf.network = 1;
&&&&&&&&&&& mapObj.plugin(["AMap.ToolBar", "AMap.OverView", "AMap.Scale"], function () {
&&&&&&&&&&&&&&& toolbar = new AMap.ToolBar();
&&&&&&&&&&&&&&& toolbar.autoPosition = //加载工具条
&&&&&&&&&&&&&&& mapObj.addControl(toolbar);
&&&&&&&&&&&&&&& overview = new AMap.OverView(); //加载鹰眼
&&&&&&&&&&&&&&& mapObj.addControl(overview);
&&&&&&&&&&&&&&& scale = new AMap.Scale(); //加载比例尺
&&&&&&&&&&&&&&& mapObj.addControl(scale);
&&&&&&&&&&& });
&&&&&&&&&&& AMap.event.addListener(mapObj,'complete',completeEventHandler);
&&&&&&&&&&&
&&&&&&& }
&&&&&&&
&&&&&&& function completeEventHandler() {
&&&&&&&
toolbar.doLocation();
&&&&&&&
listener1=AMap.event.addListener(mapObj,'dblclick',fn);
&&&&&&&
//mapObj.zoomIn();
&&&&&&& }
&&&&&&& var fn = function(e){
&&&&&&&
var lng = e.lnglat.getLng();
&&&&&&&
var lat = e.lnglat.getLat();
&&&&&&&
var lnglatXY = new AMap.LngLat(lng, lat)
geo.regeocode(lnglatXY, poiToAddressSearch_CallBack);
&&&&&&&
var data_temp="";
var& x_temp="";
var& y_temp="";
var address_
function selectPoint2(x, y , i){
address_temp = data_temp.list[i].
//alert(address_temp);
var lnglatXY = new AMap.LngLat( x, y)
geo.regeocode(lnglatXY, poiToAddressSearch_CallBack2);
function poiToAddressSearch_CallBack2(data) {
var resultStr = "";
if (data.status == "E0") {
var province, city, district, road,
province = data.list[0].province.
if (province == "北京市") {
city = data.list[0].city.
district = data.list[0].district.
road = data.list[0].roadlist[0].
address = data.list[0].poilist[0].
if(address_temp ==""){
resultStr = province + city+ district + road +
resultStr = province + city+ district + address_
//alert(x_temp + "---" + y_temp + "---" + address_temp);
selectPoint(x_temp,y_temp,resultStr);
function poiToAddressSearch_CallBack(data) {
var resultStr = "";
if (data.status == "E0") {
var province, city, district, road,
province = data.list[0].province.
if (province == "北京市") {
city = data.list[0].city.
district = data.list[0].district.
road = data.list[0].roadlist[0].
address = data.list[0].poilist[0].
resultStr = province + city+ district + road& +
//alert(resultStr + data.list[0].poilist[0].x +","+ data.list[0].poilist[0].y);
selectPoint(data.list[0].poilist[0].x,data.list[0].poilist[0].y,resultStr);
function selectPoint(x, y, address) {
if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
&&&&&&& alert("地址暂无，不能选择！");
window.opener.document.getElementById("fenceAddr").value =
window.opener.document.getElementById("positionx").value =
window.opener.document.getElementById("positiony").value =
window.close();
//window.parent.submitSaveFence.fenceInfoVO.fenceAddr.value =
}
&&&&&&& function keywordSearch() {
&&& mapObj.clearMap();
&&&&&&&&&&& var keywords = document.getElementById("keyword").
&&&&&&&&&&& var city = document.getElementById("city").
&&&&&&&&&&& var PoiSearchOption = {
&&&&&&&&&&&&&&& srctype:"POI", //数据来源
&&&&&&&&&&&&&&& type:"", //数据类别
&&&&&&&&&&&&&&& number:10, //每页数量,默认10
&&&&&&&&&&&&&&& batch:1, //请求页数，默认1
&&&&&&&&&&&&&&& range:3000, //查询范围，默认3000米
&&&&&&&&&&&&&&& ext:""//扩展字段
&&&&&&&&&&& };
&&&&&&&&&&& var MSearch = new AMap.PoiSearch(PoiSearchOption);
&&&&&&&&&&& MSearch.byKeywords(keywords, city, keywordSearch_CallBack);
xx++;
&&&&&&&&&&& date = new Date();
&&&&&&&&&&& startTime = date.getTime();
&&&&&&&&&&& //清空本次搜索的marker和windowsArr
&&&&&&&&&&& marker=[];
&&&&&&&&&&& windowsArr=[];
&&&&&&& }
&&&&&&& var resultCount = 10;
&&&&&&& var marker = new Array();
&&&&&&& var windowsArr = new Array();
var xx=0;
&&&&&&& function addmarker(i, d) {
&&&&&&&&&&& var markerOption = {
&&& map:mapObj,
&&&&&&&&&&&&&&& icon:"/webapi/static/Images/" + (i + 1) + ".png",
&&&&&&&&&&&&&&& position:new AMap.LngLat(d.x, d.y)
&&&&&&&&&&& };
&&&&&&&&&&& var mar = new AMap.Marker(markerOption);
&&&&&&&&&
&&&&&&&&&&& marker.push(new AMap.LngLat(d.x, d.y));
&&&&&&&&&&& var infoWindow = Window
&&&&&&&&&&&&&&&&&&& ({
&&&&&&&&&&&&&&&&&&&&&&& content:"&h3&&font color=\"#00a6ac\"&&&" + (i + 1) + ". " + d.name + "&/font&&/h3&" + TipContents(d.type, d.address, d.tel),
&&&&&&&&&&&&&&&&&&&&&&& size:new AMap.Size(300, 0),
&&&&&&&&&&&&&&&&&&&&&&& autoMove:true,& //设置自动调整信息窗口至视野范围
offset:new AMap.Pixel(0,-30)
&&&&&&&&&&&&&&&&&&& });
&&&&&&&&&&& windowsArr.push(infoWindow);
&&&&&&&&&&
&&&&&&&&&&& var aa = function (e) {
&&&&&&&&&&&&&&& infoWindow.open(mapObj, mar.getPosition());
&&&&&&&&&&& };
&&&&&&&&&&
//AMap.event.addListener(mar, "click", aa);
&&&&&&& }
&&&&&&& function keywordSearch_CallBack(data) {
&&&&&&&&&&& var resultStr = "";
&&&&&&&&&&& data_temp=
&&&&&&&&&&& //showTime();
//document.getElementById("textUniqId").value = data.
&&&&&&&&&&& if (data.status == "E0") {
&&&&&&&&&&&&&&& resultCount = data.list.
&&&&&&&&&&&&&&& for (var i = 0; i & data.list. i++) {
&&&&&&&&&&&&&&&
//alert(data.list[i].x+"--"+data.list[i].y+"***");
&&&&&&&&&&&&&&&&&&& resultStr += "&div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12cursor:padding:0px 0 4px 2 border-bottom:1px solid #C1FFC1;\"&" +
&&&&&&&&&&&&&&&&&&& "&table&&tr&&td&&button onclick='javascript:selectPoint2("+data.list[i].x+","+data.list[i].y+","+i+");'&选择&/button&&/td&&td&&img src=\"/webapi/static/Images/" + (i + 1) + ".png\"&&/td&"
&&&&&&&&&&&&&&&&&&& + "&td&&h3&&font color=\"#00a6ac\"&名称: " + data.list[i].name + "&/font&&/h3&";
&&&&&&&&&&&&&&&&&&& resultStr += TipContents(data.list[i].type, data.list[i].address, data.list[i].tel) + "&/td&&/tr&&/table&&/div&";
&&&&&&&&&&&&&&&&&&& addmarker(i, data.list[i]);
&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&& mapObj.setFitView();
&&&&&&&&&&& }
&&&&&&&&&&& else if (data.status == "E1") {
&&&&&&&&&&&&&&& resultStr = "未查找到任何结果!&br /&建议：&br /&1.请确保所有字词拼写正确。&br /&2.尝试不同的关键字。&br /&3.尝试更宽泛的关键字。";
&&&&&&&&&&& }
&&&&&&&&&&& else {
&&&&&&&&&&&&&&& resultStr = "错误信息：" + data.state + "请对照API Server v2.0.0 简明提示码对照表查找错误类型";
&&&&&&&&&&& }
&&&&&&&&&&& document.getElementById("result").innerHTML = resultS
&&&&&&& }
&&&&&&& function TipContents(type, address, tel) {
&&&&&&&&&&& if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {
&&&&&&&&&&&&&&& type = "暂无";
&&&&&&&&&&& }
&&&&&&&&&&& if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
&&&&&&&&&&&&&&& address = "暂无";
&&&&&&&&&&& }
&&&&&&&&&&& if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {
&&&&&&&&&&&&&&& tel = "暂无";
&&&&&&&&&&& }
&&&&&&&&&&& var str = "&&地址：" + address + "&br /&&&电话：" + tel + " &br /&&&类型：" +
&&&&&&&&&&&
&&&&&&& }
&&&&&&& function openMarkerTipById1(pointid, thiss) {& //根据id 打开搜索结果点tip
&&&&&&&&&&& thiss.style.background = '#CAE1FF';
&&&&&&&&&&& windowsArr[pointid].open(mapObj, marker[pointid]);
&&&&&&& }
&&&&&&& function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复
&&&&&&&&&&& thiss.style.background = "";
&&&&&&& }
&&&&&&& function showTime(){
&&&&&&&&&&& var date = new Date();
&&&&&&&&&&& document.getElementById("textSearchTime").value = date.getTime() - startTime + "毫秒";
&&&&&&& }
&&& &/script&
&/head&
&body onload="mapInit();" &
&& &div class="addressMain"&
&div class="left" &
&div class="searcherLayer"&
&& &b&城市：&/b&
&&&&&&&&&& &input type="text" id="city" name="city" value=""/&
&&&&&&&&&& &b&关键字：&/b&
&&&&&&&&&& &input type="text" id="keyword" name="keyword" value=""/&
&&&&&&&&&& &input type="button" value="查询" onclick="keywordSearch()" style="margin-left:5px"/&
&&& &div id="iCenter" style="width:679height:400border:#F6F6F6 solid 1"&&/div&
&&& &/div&
&&& &div class="right" &
&div id="r_title"&关键字搜索结果:&/div&
&&&&&&& &div id="result"&&/div&
&&& &/div&
&& &/div&
&/body&
&/html&
ahua186186
浏览: 188426 次
来自: 深圳
请问图片还能找的会吗？你的图片和原文的图片都挂了，，，如果有图 ...
yngwiet 写道楼主，有一个地方不太明白，为什么要用“ge ...
楼主，有一个地方不太明白，为什么要用“getChildAt(p ...高德地图Javascript API常用功能实践 | Qinsman
高德地图提供了功能强大的JavaScript API，能够帮助开发人员在Web或移动端中构建丰富、可交互性强的地图工具，包括基本地图功能接口、以及搜索、路线规划等数据服务接口，供开发者根据需要进行选择性使用。本博客撰写时最新版本为JavaScript API V1.3.13。在高德地图开放平台上，官方已经为JS API提供了较为详尽的参考文档，因此本文不再对这些接口的具体语法进行逐一列举解读，而是通过几个最常用应用场景的实践，对这些功能的实现方案配合DEMO和完整的JS代码进行展示，并在后面附上了实践中所涉及知识点的官方文档链接。
1. 标记1.1 应用场景
设置默认标记
设置自定义图片的标记
设置自定义HTML内容的标记
设置可以分级显示与隐藏（根据地图缩放级别）的标记
“设置默认标记”/“隐藏默认标记”：在华师设置（隐藏）一个高德地图默认的Marker。
“设置自定义标记”/“隐藏自定义标记”：在华工设置（隐藏）一个自定义图片标记（一只符合华工气质的doge）。
“设置Content标记”/“隐藏Content标记”：在华农洪泽湖设置（隐藏）一个自定义内容文本标记。
“设置分级标记”/“隐藏分级标记”：分别显示三所学校的人数（都是估计值，不要在意这种细节），而当点击每所学校的绿色标记时（DEMO中仅以华工做示例），将显示更详细的北区、东区、西区、南区的人数，而当地图的缩放级别小于15时，这些更详细的标记将重新隐藏。
1.3 涉及的文档
JS123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172var 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] =
},};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',{
center: [113.347718,23.151976]});
var simplemarker = new AMap.Marker();
var iconObj = new AMap.Icon({
image: 'icon01.png',
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..155631",
"count": 27000,
"subDistricts": [{
"name": "华工东区",
"center": "113.343",
"count": 5000
}, {
"name": "华工西区",
"center": "113..152672",
"count": 10000
}, {
"name": "华工南区",
"center": "113..148489",
"count": 500
}, {
"name": "华工北区",
"center": "113..162102",
"count": 11500
}, {
"name": "华南农业大学",
"center": "113..15938",
"count": 38000,
"subDistricts": []
}, {
"name": "华南师范大学",
"center": "113..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.i+=1){
marker.subMarkers.push(createMarker(data.subDistricts[i],true));
function zoomEnd() {
if (map.getZoom() & 15) {
for (var i = 0; i & detailmarkers. 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. 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. i++) {
detailmarkers[i].setMap();
detailmarkers = [];
})})();
2. 图层2.1 应用场景
显示实时路况
显示卫星图
显示地图模式切换控件
显示工具条
显示比例尺
显示定位插件
开启鼠标标记模式（鼠标在地图上点击时可以添加Marker）
开启鼠标测量模式（如测距等）
开启拖曳导航（根据起、经、终点规划线路）
“放大至18级”/“恢复至15级”：缩放可以由滚轮控制，也可以人为指定缩放级别
“显示路况”/“隐藏路况”：显示（隐藏）实时路况信息
“显示路网”/“隐藏路网”：显示（隐藏）路网信息
“显示卫星图”/“隐藏卫星图”：显示（隐藏）卫星图（实际上是在2D地图上覆盖了一个卫星图图层）
“显示模式切换器”/“隐藏模式切换器”：显示（隐藏）地图模式切换控件，同时将默认模式设置为2D地图模式（默认值可以通过参数调整），路况、路网、卫星图这三个图层实际上可以通过这个内置的控件由用户自由切换。
“显示鹰眼”/“隐藏鹰眼”：显示（隐藏）鹰眼
“显示工具条”/“隐藏工具条”：显示（隐藏）工具条（“鱼骨”控件）
“显示比例尺”/“隐藏比例尺”：显示（隐藏）比例尺
“显示定位插件”/“隐藏定位插件”：显示（隐藏）定位插件，点击定位按钮后可以获取当前位置，并将地图显示范围自动移动至定位到的坐标。
“显示比例尺”/“隐藏比例尺”：显示（隐藏）比例尺
“开启鼠标标记模式”/“关闭鼠标标记模式”：开启（关闭）鼠标标记模式，开启时，鼠标在地图上点击时可以在相应的位置插入新的Marker。
“开启测量插件”/“关闭测量插件”：开启（关闭）鼠标测量插件，开启时，鼠标在地图上点击时可以指定一系列节点，测量总距离。测距只是测量功能的其中一种，其他测量功能可以参考开发文档。
“开启拖曳导航”/“隐藏拖曳导航”：开启（关闭）拖曳导航，开启时，可以根据地图上指定的起、经、终点规划线路，DEMO中默认设计了一条从中山立交桥底、经石牌东路到天河东路的驾车路线（还可以设计步行或公交路线），其中“起”、“经”、“终”三个锚点都是可以拖曳的，拖曳后路线规划将实时刷新。
2.3 涉及的文档
JS123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191var 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] =
},};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',{
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,
timeout: 10000,
maximumAge: 0,
convert: true,
showButton: true,
buttonPosition: 'RB',
buttonOffset: new AMap.Pixel(0, 0),
showMarker: true,
showCircle: true,
panToLocation: true,
zoomToAccuracy:true
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时显示相应的窗体。
“设置默认标记”/“隐藏默认标记”：在岗顶百脑汇设置（隐藏）一个高德地图默认的Marker。
“设置信息窗体”/“隐藏信息窗体”：在相同位置创建一个默认窗体，内容是百脑汇和其地址，设置后需要点击上一条中所述的Marker才能打开。
“设置高级信息窗体”/“隐藏高级信息窗体”：在暨大北门打开一个内容为“BRT师大暨大站”的高级信息窗体，其中包装了“在附近找”、“这里出发”、“到这里去”三种功能，及驾车、公交步行三种路线规划策略的高级信息窗体。
3.3 涉及的文档
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273var 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] =
},};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',{
center: [113..134376]});
var marker = new AMap.Marker();
var infowindow = Window();
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.251));
Event.addHandler(btnHideAdvWin,"click",function(){
advwindow.close();
})Event.addHandler(btnSetMarker,"click",function(){
marker.setMap(map);
marker.setPosition([113..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 应用场景
显示全市范围内某关键词的搜索结果
显示坐标附近某关键词的搜索结果
提供搜索框控件（带输入提示功能）
“显示搜索（附近）”：以“医院”为关键词搜索岗顶附近2km的范围，显示第1~10个结果。
“显示搜索（全市）”：以“医院”为关键词搜索广州市，显示第1~10个结果。
“隐藏搜索”：隐藏上述搜索结果。
“显示搜索框”/“隐藏搜索框”：显示（隐藏）一个带有输入提示功能的搜索框。
4.3 涉及的文档
JS123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475var 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] =
},};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',{
center: [113.339338,23.134376]});
AMap.service(["AMap.PlaceSearch"], function() {
var placeSearch = new AMap.PlaceSearch({
pageSize: 10,
pageIndex: 1,
city: "广州",
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"
autocomplete= new AMap.Autocomplete(autoOptions);
var placeSearchPoi = new AMap.PlaceSearch({
city: "广州",
AMap.event.addListener(autocomplete, "select", function(elm){
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.3 涉及的文档
JS1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192var 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] =
},};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',{
center: [113.339338,23.134376]});
AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
var autoOptionsFrom = {
city: "广州",
input: "keyword-from"
var autoOptionsTo = {
city: "广州",
input: "keyword-to"
var placeFrom, placeTo;
autocompleteFrom= new AMap.Autocomplete(autoOptionsFrom);
autocompleteTo= new AMap.Autocomplete(autoOptionsTo);
AMap.event.addListener(autocompleteFrom, "select", function(elm){
placeFrom = elm.poi.
AMap.event.addListener(autocompleteTo, "select", function(elm){
placeTo = elm.poi.
AMap.service(["AMap.Driving","AMap.Walking","AMap.Transfer"], function() {
var driving = new AMap.Driving({
panel: "panel"
var walking = new AMap.Walking({
panel: "panel"
var transfer = new AMap.Transfer({
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坐标，即火星坐标）及地址。
在地图上点击任意位置，可添加一个Marker，并在下面的坐标栏和地址栏分别显示该处的经纬度及地址。
6.3 涉及的文档
JS1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950var 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] =
},};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',{
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 + "," +
coordinate = new AMap.LngLat(x,y);
map.plugin(["AMap.Geocoder"], function() {
var geocoder = new AMap.Geocoder({
city: "广州"
var marker = new AMap.Marker({
position: coordinate,
geocoder.getAddress(coordinate,function(status,result){
boxAddress.value = result.regeocode.formattedA
map.setCenter(marker.getPosition())
}})();
关注我的公众号，一个卖馒头，也卖故事的地方：）}