摘要：无论是百度LBS开放平台，还是高德LBS开放平台，其调用量最高的接口，必然是定位，其次就是地址解析了，又称为地理编码。地址解析，就是将地址转换为经纬度。而逆地址解析，就是将经纬度转换为地址。经纬度一般是由专业测绘机构用GPS采集，然后使用国测局接口加密，最后呈现在互联网地图上的。而地址，这里说的是结构化的带街道门牌号的地址，比如&北京市朝阳区阜通东大街6号&，这个地址是由公安局颁发的。而将地址和经纬度一一对应起来，这个就是高德地图做的事情了，也就是地址解析接口的功能了。地址解析功能，实用性强，调用频次高，谷歌API的地址解析接口甚至是收费的！所以，现在有现成免费的接口，大家应该很开心呀。
---------------------------------------------------------------------------
使用高德提供的AMap.Geocoder插件即可实现地址解析，和逆地址解析。
地理编码类是指将地址信息和地理坐标点信息进行相互转化，包括将地址信息转换为地理坐标点的编码和将地理坐标点转换为地址信息的逆地理编码。
1、地理编码
地理编码是将地址信息转换为地理坐标点信息，你可以使用此项功能在指定位置添加一个点或是定位地图上的某个位置。接口为：
geocoder.getLocation("北京市海淀区苏州街");
//加载地理编码插件
mapObj.plugin(["AMap.Geocoder"],function(){
geocoder=new AMap.Geocoder({
radius:1000, //以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
city："010"//城市，默认："全国"
//返回地理编码结果
AMap . event . addListener(geocoder, "complete",geocoder_callBack);
geocoder.getLocation("北京市海淀区苏州街");
2、逆地理编码
逆地理编码又称位置描述或地址解析，即从已知的经纬度坐标到对应的地址描述（如省市、街区、楼层、房间等）的转换。接口为：
geocoder.getAddress(lnglatXY);
var lnglatXY=new AMap.LngLat(116..992706);
//加载地理编码插件
mapObj.plugin(["AMap.Geocoder"],function(){
geocoder=new AMap.Geocoder({
radius:1000, //以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
extensions: "all"//返回地址描述以及附近兴趣点和道路信息，默认"base"
//返回地理编码结果
AMap . event . addListener(geocoder, "complete",geocoder_callBack);
//逆地理编码
geocoder.getAddress(lnglatXY);
3、全部源代码
&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&地址解析&/title&
&link rel="stylesheet" type="text/css" href="zero.css" /&
&script language="javascript" src="/maps?v=1.3&key=【您的key】"&&/script&
&body onLoad="mapInit()"&
&div id="iCenter"&&/div&
&div id="iControlbox"&
&input type="text" id="key_11" value="116.51413" /&
&input type="text" id="key_12" value="39.912896" /&
&button onclick="javascript:geocoder2();"&逆地址解析&/button&
&input type="text" id="key_2" value="北京市朝阳区大屯路304号" /&
&button onclick="javascript:geocoder();"&地址解析&/button&
&div id="result"&&/div&
&script language="javascript"&
var marker = [];
var windowsArr = [];
function mapInit () {
mapObj = new AMap.Map('iCenter');
//默认定位：初始化加载地图时，center及level属性缺省，地图默认显示用户所在城市范围
var key_11;
var key_12;
var key_2;
function geocoder2() {
//POI搜索，关键字查询
key_11 = document.getElementById("key_11").
key_12 = document.getElementById("key_12").
var lnglatXY = new AMap.LngLat(key_11,key_12);
//document.getElementById('result').innerHTML = "您输入的是：" + key_1;
//加载地理编码插件
mapObj.plugin(["AMap.Geocoder"], function() {
MGeocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
//返回地理编码结果
AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack2);
//逆地理编码
MGeocoder.getAddress(lnglatXY);
var marker = new AMap.Marker({
map:mapObj,
icon: new AMap.Icon({
image: "/Public/images/js/mark.png",
size:new AMap.Size(58,30),
imageOffset: new AMap.Pixel(-32, -0)
position: lnglatXY,
offset: new AMap.Pixel(-5,-30)
mapObj.setFitView();
//鼠标划过显示相应点
var marker2;
function onMouseOver (e) {
var coor = e.split(','),
lnglat = new AMap.LngLat(coor[0], coor[1]);
if (!marker2) {
marker2 = new AMap.Marker({
map:mapObj,
icon: "/images/0.png",
position: lnglat,
offset: new AMap.Pixel(-10, -34)
marker2.setPosition(lnglat);
mapObj.setFitView();
function geocoder_CallBack2(data) { //回调函数
var resultStr = "";
var roadinfo ="";
var poiinfo="";
//返回地址描述
address = data.regeocode.formattedA
//返回周边道路信息
roadinfo +="&table style='width:600px'&";
for(var i=0;i&data.regeocode.roads.i++){
var color = (i % 2 === 0 ? '#fff' : '#eee');
roadinfo += "&tr style='background-color:" + color + "; margin:0; padding:0;'&&td&道路：" + data.regeocode.roads[i].name + "&/td&&td&方向：" + data.regeocode.roads[i].direction + "&/td&&td&距离：" + data.regeocode.roads[i].distance + "米&/td&&/tr&";
roadinfo +="&/table&"
//返回周边兴趣点信息
poiinfo += "&table style='width:600cursor:'&";
for(var j=0;j&data.regeocode.pois.j++){
var color = j % 2 === 0 ? '#fff' : '#eee';
poiinfo += "&tr onmouseover='onMouseOver(\"" + data.regeocode.pois[j].location.toString() + "\")' style='background-color:" + color + "; margin:0; padding:0;'&&td&兴趣点：" + data.regeocode.pois[j].name + "&/td&&td&类型：" + data.regeocode.pois[j].type + "&/td&&td&距离：" + data.regeocode.pois[j].distance + "米&/td&&/tr&";
poiinfo += "&/table&";
//返回结果拼接输出
resultStr = "&div style=\"font-size: 12padding:0px 0 4px 2 border-bottom:1px solid #C1FFC1;\"&"+"&b&地址&/b&："+ address + "&hr/&&b&周边道路信息&/b&：&br/&" + roadinfo + "&hr/&&b&周边兴趣点信息&/b&：&br/&" + poiinfo +"&/div&";
document.getElementById("result").innerHTML = resultS
function geocoder() {
//地理编码返回结果展示
key_2 = document.getElementById("key_2").
mapObj.plugin(["AMap.Geocoder"], function() {
//加载地理编码插件
MGeocoder = new AMap.Geocoder();
//返回地理编码结果
AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);
MGeocoder.getLocation(key_2);
//地理编码
//地理编码返回结果展示
function geocoder_CallBack(data){
var resultStr="";
//地理编码结果数组
var geocode = new Array();
geocode = data.
for (var i = 0; i & geocode. i++) {
//拼接输出html
resultStr += "&span style=\"font-size: 12padding:0px 0 4px 2 border-bottom:1px solid #C1FFC1;\"&"+"&b&地址&/b&："+geocode[i].formattedAddress+""+ "&b&
坐标&/b&：" + geocode[i].location.getLng() +", "+ geocode[i].location.getLat() +""+ "&b&
匹配级别&/b&：" + geocode[i].level +"&/span&";
addmarker(i, geocode[i]);
mapObj.setFitView();
document.getElementById("result").innerHTML = resultS
function addmarker(i, d) {
var lngX = d.location.getLng();
var latY = d.location.getLat();
var markerOption = {
map:mapObj,
icon:"/images/"+(i+1)+".png",
position:new AMap.LngLat(lngX, latY)
var mar = new AMap.Marker(markerOption);
marker.push(new AMap.LngLat(lngX, latY));
var infoWindow = new Window({
content:d.formattedAddress,
autoMove:true,
size:new AMap.Size(150,0),
offset:{x:0,y:-30}
windowsArr.push(infoWindow);
var aa = function(e){infoWindow.open(mapObj,mar.getPosition());};
AMap.event.addListener(mar,"click",aa);
demo地址：
阅读(...) 评论()先来看两个问题：路线规划与导航有什么区别？步行导航与驾车导航有什么区别？
1、路线规划，指的是为用户提供3条路线推荐。【高德】在提供路线规划的时候，会提供用户自定义路线规划功能，这是别家没有做到的。导航，指的是为驾车用户提示路口信息，向左向右，进入匝道等信息。
2、我们这里说的步行导航和驾车导航，严格的说，应该是路线规划。从A地到B地，如果是驾车，路线规划会将公路路网做为搜索数据；如果是步行，过街天桥、地下通道、人行道做为搜索数据。
-------------------------------------------------------------------------------------------------------
一、路线规划&&驾车
&1、驾车路线规划
有三种策略，分别是最短时间、最少费用、最短路径、规避拥堵（参考了实时交通数据，这个比较NB）。
LEAST_TIME，LEAST_FEE, LEAST_DISTANCE,REAL_TRAFFIC
我们在这里采取驾车插件来做。代码：
//驾车导航
function driving_route() {
clearMap();
mapObj.plugin(["AMap.Driving"], function() {
var DrivingOption = {
policy: AMap.DrivingPolicy.LEAST_TIME
MDrive = new AMap.Driving(DrivingOption); //构造驾车导航类
AMap.event.addListener(MDrive, "complete", driving_routeCallBack); //返回导航查询结果
MDrive.search(start_xy, end_xy); //根据起终点坐标规划驾车路线
2、驾车最后一公里步行
在最开始一段，和最后一段步行距离的时候，可以用虚线来表示。
//起点到路线的起点 路线的终点到终点 绘制无道路部分
var extra_path1 = new Array();
extra_path1.push(start_xy);
extra_path1.push(steps[0].path[0]);
var extra_line1 = new AMap.Polyline({
map: mapObj,
path: extra_path1,
strokeColor: "#9400D3",
strokeOpacity: 0.7,
strokeWeight: 4,
strokeStyle: "dashed",
strokeDasharray: [10, 5]
var extra_path2 = new Array();
var path_xy = steps[(steps.length-1)].
extra_path2.push(end_xy);
extra_path2.push(path_xy[(path_xy.length-1)]);
var extra_line2 = new AMap.Polyline({
map: mapObj,
path: extra_path2,
strokeColor: "#9400D3",
strokeOpacity: 0.7,
strokeWeight: 4,
strokeStyle: "dashed",
strokeDasharray: [10, 5]
3、驾车导航拖拽效果
如果要可拖拽的效果，需要使用另外一个插件，AMap.DragRoute。
//可拖拽的驾车导航
function driving_route_drag(){
clearMap();
var path = [start_xy,end_xy];
mapObj.plugin("AMap.DragRoute",function(){
MDrive = new AMap.DragRoute(mapObj, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
MDrive.search(); //查询导航路径并开启拖拽导航
示例查看：
二、路线规划&&公交
&1、公交导航
公交导航不仅是路线相关的，还是根据公交车路线数据，进行查询。使用到插件AMap.LineSearch。
//公交线路查询
function lineSearch() {
clearMap();
//加载公交线路查询插件
//实例化公交线路查询类，只取回一条路线
mapObj.plugin(["AMap.LineSearch"], function() {
var linesearch = new AMap.LineSearch({
pageIndex:1,
city:'北京',
pageSize:1,
extensions:'all'
//搜索&518&相关公交线路
linesearch.search('518');
AMap.event.addListener(linesearch, "complete", lineSearch_Callback);
AMap.event.addListener(linesearch, "error", function(e){);
2、公交线路查询，如518
查询公交线路，需要注明城市。每个城市都可能有518路线，对吧。
//公交线路查询
function lineSearch() {
clearMap();
//加载公交线路查询插件
//实例化公交线路查询类，只取回一条路线
mapObj.plugin(["AMap.LineSearch"], function() {
var linesearch = new AMap.LineSearch({
pageIndex:1,
city:'北京',
pageSize:1,
extensions:'all'
//搜索&518&相关公交线路
linesearch.search('518');
AMap.event.addListener(linesearch, "complete", lineSearch_Callback);
AMap.event.addListener(linesearch, "error", function(e){);
3、通过站点，查公交线路
比如，我在北京东直门，想知道东直门都有哪些公交路线。使用服务插件AMap.StationSearch。
//公交站点查询
function stationSearch() {
clearMap();
//加载公交站点查询插件
mapObj.plugin(["AMap.StationSearch"], function() {
//实例化公交站点查询类
var station = new AMap.StationSearch({
pageIndex: 1, //页码
pageSize: 10, //单页显示结果条数
city:'010'
//确定搜索城市
station.search('东直门'); //查询
AMap.event.addListener(station, 'complete', stationSearch_CallBack);
AMap.event.addListener(station, 'error', function(e) {);});
示例查看：
三、路线规划&&步行
&步行，可以过天桥啊，地下通道啊，穿过小区啊，不能走高速公路啊，等特点。
//步行导航
function walking_route() {
mapObj.plugin(["AMap.Walking"], function() {
MWalk = new AMap.Walking(); //构造路线导航类
AMap.event.addListener(MWalk, "complete", walk_routeCallBack); //返回导航查询结果
MWalk.search(start_xy, end_xy); //根据起终点坐标规划步行路线
示例查看：
驾车，公交，步行的区别
1、从效果图里可以看出，这三种路线规划是搜索的不同数据库。
2、他们的服务插件不一样，都是通过【高德服务插件】进行调用。比原生API接口封装得更加完善，使用起来更加简单。
五、全部源代码
&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&地图路线规划服务&/title&
&link rel="stylesheet" type="text/css" href="zero.css" /&
&script language="javascript" src="/maps?v=1.2&key=caaa086bdf5666322fba3baf5a6a2c03"&&/script&
&body onLoad="mapInit()"&
&div id="iCenter"&&/div&
&div id="iControlbox"&
&p&坐标：&span id="lnglats"&&&/span&&/p&
&button onclick="javascript:driving_route();"&驾车路线规划&/button&
&button onclick="javascript:driving_route_drag();"&可拖拽插件&/button&
&button onclick="javascript:transfer_route();"&公交路线规划&/button&
&button onclick="javascript:lineSearch();"&518路公交车&/button&
&button onclick="javascript:stationSearch();"&东直门站点&/button&
&button onclick="javascript:walking_route();"&步行路线规划&/button&
&button onclick="javascript:clearMap();"&清空地图&/button&
&div id="result"&&/div&
&!-- tongji begin--&
&script type="text/javascript"&
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "/h.js%3Faeff88fafcea3bd' type='text/javascript'%3E%3C/script%3E"));
&!-- tongji end --&
&script language="javascript"&
function setLi(id1,id2){
document.getElementById("box1").style.display = "none";
document.getElementById("box2").style.display = "none";
document.getElementById("box3").style.display = "none";
document.getElementById(id1).style.display = "block";
document.getElementById("iLi1").style.background = "#eee";
document.getElementById("iLi2").style.background = "#eee";
document.getElementById("iLi3").style.background = "#eee";
document.getElementById(id2).style.background = "#fff";
var route_text
var btContent = new Array(); //结果表格数组
var resultS//结果拼接string
var resLine
= ''; //结果表格对象
//初始化地图对象，加载地图
function mapInit(){
mapObj = new AMap.Map("iCenter",{
center:new AMap.LngLat(116.397428,39.90923), //地图中心点
//地图显示的比例尺级别
AMap.event.addListener(mapObj,'click',getLnglat); //点击事件
//鼠标点击，获取经纬度坐标
function getLnglat(e){
var x = e.lnglat.getLng();
var y = e.lnglat.getLat();
document.getElementById("lnglats").innerHTML = x + "," +
//清空地图
function clearMap(){
mapObj.clearMap();
document.getElementById("result").innerHTML = '&';
//起、终点
var start_xy = new AMap.LngLat(116.379018,39.865026);
var end_xy = new AMap.LngLat(116.321139, 39.896028);
//驾车导航
function driving_route() {
clearMap();
mapObj.plugin(["AMap.Driving"], function() {
var DrivingOption = {
//驾车策略，包括 LEAST_TIME，LEAST_FEE, LEAST_DISTANCE,REAL_TRAFFIC
policy: AMap.DrivingPolicy.LEAST_TIME
MDrive = new AMap.Driving(DrivingOption); //构造驾车导航类
AMap.event.addListener(MDrive, "complete", driving_routeCallBack); //返回导航查询结果
MDrive.search(start_xy, end_xy); //根据起终点坐标规划驾车路线
//可拖拽的驾车导航
function driving_route_drag(){
clearMap();
var path = [start_xy,end_xy];
mapObj.plugin("AMap.DragRoute",function(){
MDrive = new AMap.DragRoute(mapObj, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
MDrive.search(); //查询导航路径并开启拖拽导航
//导航结果展示
function driving_routeCallBack(data) {
var routeS = data.
if (routeS.length &= 0) {
document.getElementById("result").innerHTML = "未查找到任何结果!&br /&建议：&br /&1.请确保所有字词拼写正确。&br /&2.尝试不同的关键字。&br /&3.尝试更宽泛的关键字。";
route_text="";
for(var v =0; v& routeS.v++){
//驾车步骤数
steps = routeS[v].steps
var route_count = steps.
//行车距离（米）
var distance = routeS[v].
//拼接输出html
for(var i=0 ;i& steps.i++){
route_text += "&tr&&td align=\"left\" onMouseover=\"driveDrawFoldline('" + i + "')\"&" + i +"." +steps[i].instruction
+ "&/td&&/tr&";
//输出行车路线指示
route_text = "&table cellspacing=\"5px\"&&tr&&td style=\"background:#e1e1e1;\"&路线&/td&&/tr&&tr&&td&&img src=\"/images/start.gif\" /&&&北京南站&/td&&/tr&" + route_text + "&tr&&td&&img src=\"/images/end.gif\" /&&&北京西站&/td&&/tr&&/table&";
document.getElementById("result").innerHTML = route_
drivingDrawLine();
//绘制驾车导航路线
function drivingDrawLine(s) {
//起点、终点图标
var sicon = new AMap.Icon({
image: "/Public/images/js/poi.png",
size:new AMap.Size(44,44),
imageOffset: new AMap.Pixel(-334, -180)
var startmarker = new AMap.Marker({
icon : sicon, //复杂图标
visible : true,
position : start_xy,
map:mapObj,
offset : {
var eicon = new AMap.Icon({
image: "/Public/images/js/poi.png",
size:new AMap.Size(44,44),
imageOffset: new AMap.Pixel(-334, -134)
var endmarker = new AMap.Marker({
icon : eicon, //复杂图标
visible : true,
position : end_xy,
map:mapObj,
offset : {
//起点到路线的起点 路线的终点到终点 绘制无道路部分
var extra_path1 = new Array();
extra_path1.push(start_xy);
extra_path1.push(steps[0].path[0]);
var extra_line1 = new AMap.Polyline({
map: mapObj,
path: extra_path1,
strokeColor: "#9400D3",
strokeOpacity: 0.7,
strokeWeight: 4,
strokeStyle: "dashed",
strokeDasharray: [10, 5]
var extra_path2 = new Array();
var path_xy = steps[(steps.length-1)].
extra_path2.push(end_xy);
extra_path2.push(path_xy[(path_xy.length-1)]);
var extra_line2 = new AMap.Polyline({
map: mapObj,
path: extra_path2,
strokeColor: "#9400D3",
strokeOpacity: 0.7,
strokeWeight: 4,
strokeStyle: "dashed",
strokeDasharray: [10, 5]
var drawpath = new Array();
for(var s=0; s&steps. s++){
drawpath = steps[s].
var polyline = new AMap.Polyline({
map: mapObj,
path: drawpath,
strokeColor: "#9400D3",
strokeOpacity: 0.7,
strokeWeight: 4,
strokeDasharray: [10, 5]
mapObj.setFitView();
//绘制驾车导航路段
function driveDrawFoldline(num){
var drawpath1 = new Array();
drawpath1 = steps[num].
if(polyline != null){
polyline.setMap(null);
polyline = new AMap.Polyline({
map: mapObj,
path: drawpath1,
strokeColor: "#FF3030",
strokeOpacity: 0.9,
strokeWeight: 4,
strokeDasharray: [10, 5]
mapObj.setFitView(polyline);
//公交导航
function transfer_route() {
clearMap();
//加载公交换乘插件
mapObj.plugin(["AMap.Transfer"], function() {
transOptions = {
city: '北京市',
//公交城市
policy: AMap.TransferPolicy.LEAST_TIME //乘车策略
//构造公交换乘类
trans = new AMap.Transfer (transOptions);
//返回导航查询结果
AMap.event.addListener(trans, "complete", transCallBack);
//显示错误信息
AMap.event.addListener(trans, "error", function(e) {);});
//根据起、终点坐标查询公交换乘路线
trans.search(start_xy,end_xy);
function transCallBack(data) {
var btCount
var btPlans
var btOrigin
var btDestination = data.
var btTaxiCost
= data.taxi_
var startName
= "北京南站"; //可以使用地理编码解析起点和终点坐标
var endName
= "北京站";
var BusArr
var WalkArr
= new Array();
var onwalk
= new Array();
//结果输出用表格展现，输出表格头
var resTableHeader = "&table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"&&tr&&td width=\"80\" style=\" border-left:1px solid # background:#e1e1e1;\"&　乘车方案&/td&&td width=\"80\" style=\" border-left:1px solid # background:#e1e1e1;\"&　导航信息&/td&&/tr&";
btContent.push(resTableHeader);
//遍历每种换乘方案
for (var i = 0; i & btPlans. i++) {
var btDistance
= btPlans[i].
= btPlans[i].
var lineNameArr = new Array();
var resLine
var naviInfo
for(var j = 0; j & btseg. j++) {
naviInfo += btseg[j].instruction + "&br/&";
if(btseg[j].transit_mode =="WALK") {
if(i===0) {
WalkArr.push(btseg[j].transit.path);
lineName = btseg[j].transit.lines[0].
lineNameArr.push(lineName);
if(i===0) {
BusArr.push(btseg[j].transit.path);
lineName = lineNameArr.join("--&");
drawBuschangeLine(btOrigin,btDestination,BusArr,WalkArr);
//结果输出用表格展现，输出表格内容
resLine = "&table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"&"
+ "&tr&&td width=\"80\" class=\"change_blue\"&"+ lineName +"&/td&&td width=\"80\" class=\"change_blue\" &"
+ Getdistance(btDistance) + "&/td&&/tr&" + "&tr&&td width=\"80\" class=\"change_blue\" &&/td&&td width=\"80\"&&img src=\"/images/start.gif\" /& &b&起点&/b& " + startName + "&/td&&/tr&" + "&tr&&td width=\"80\" class=\"change_blue\"&&/td&&td width=\"80\" class=\"change_blue\"&"+ naviInfo +"&/td&&/tr&"+ "&tr&&td width=\"80\" class=\"change_blue\" &&/td&&td width=\"80\"&&img src=\"/images/end.gif\" /& &b&终点&/b& " + endName + "&/td&&/tr&";
btContent.push(resLine);
resultStr = btContent.join("");
//写到result这个div
document.getElementById("result").innerHTML = resultS
//取出需要加换乘、步行图标的位置，这里仅画出第一个换乘方案
var sinseg = btPlans[0].
for(var a in sinseg) {
if(sinseg[a].transit_mode =="WALK") {
onwalk.push(sinseg[a].transit.origin);
onbus.push(sinseg[a].transit.on_station.location);
addMarker(onbus);
mapObj.setFitView();
//距离，米换算为千米
function Getdistance(len) {
if (len &= 1000) {
return s + "米";
var s = Math.round(len / 1000);
return "约" + s + "公里";
//绘制路线，仅第一条
function drawBuschangeLine(startPot,endPot,BusArr,WalkArr) {
//自定义起点，终点图标
var sicon = new AMap.Icon({
image: "/Public/images/js/poi.png",
size: new AMap.Size(44,44),
imageOffset: new AMap.Pixel(-334, -180)
var eicon = new AMap.Icon({
image: "/Public/images/js/poi.png",
size: new AMap.Size(44,44),
imageOffset: new AMap.Pixel(-334, -134)
//绘制起点，终点
var stmarker = new AMap.Marker({
map:mapObj,
position:new AMap.LngLat(startPot.lng,startPot.lat), //基点位置
icon:sicon, //复杂图标
offset:{x:-16,y:-34} //相对于基点的位置
var endmarker = new AMap.Marker({
map:mapObj,
position:new AMap.LngLat(endPot.lng,endPot.lat), //基点位置
icon:eicon, //复杂图标
offset:{x:-16,y:-34} //相对于基点的位置
//绘制乘车的路线
for(var j in BusArr) {
busPolyline = new AMap.Polyline({
map:mapObj,
path:BusArr[j],
strokeColor:"#005cb5",//线颜色
strokeOpacity:0.8,//线透明度
strokeWeight:6//线宽
//绘制步行的路线
for (var i in WalkArr) {
walkPolyline = new AMap.Polyline({
map:mapObj,
path:WalkArr[i],
strokeColor : "#6EB034", //线颜色
strokeOpacity : 0.6, //线透明度
strokeWeight : 6//线宽
function addMarker(busmar) {
for (var i = 0; i & busmar. i++) {
var busmarker = new AMap.Marker({
icon : new AMap.Icon({
image: "/Public/images/js/busroute.png",
size: new AMap.Size(20, 20),
imageOffset: new AMap.Pixel(-33, -3)
position : busmar[i],
offset : {
map:mapObj
//公交线路查询
function lineSearch() {
clearMap();
//加载公交线路查询插件
//实例化公交线路查询类，只取回一条路线
mapObj.plugin(["AMap.LineSearch"], function() {
var linesearch = new AMap.LineSearch({
pageIndex:1,
city:'北京',
pageSize:1,
extensions:'all'
//搜索&518&相关公交线路
linesearch.search('518');
AMap.event.addListener(linesearch, "complete", lineSearch_Callback);
AMap.event.addListener(linesearch, "error", function(e){);
function lineSearch_Callback(data) {
var lineArr
= data.lineI
var lineNum
= data.lineInfo.
if(lineNum == 0) {
resLine = ;
resLine += "&div id=\"divid" + i + "\"&&table&";
for(var i = 0; i & lineN i++) {
var lineName = lineArr[i].
var lineCity = lineArr[i].
var distance = lineArr[i].
var company
= lineArr[i].
= lineArr[i].
= lineArr[i].
var pathArr
= lineArr[i].
= lineArr[i].via_
var startPot = stops[0].
var endPot
= stops[stops.length-1].
//结果输出用DIV展现，输出内容
resLine += "&tr&&td&&h3&&font color=\"#00a6ac\"&" + lineName + "&/font&&/h3&&/td&&/tr&";
resLine += "&tr&&td&首末车时间：" + stime.substring(0, 2) + ":" + stime.substring(2, 4) + '-' + etime.substring(0, 2) + ":" + etime.substring(2, 4) + "；" + "全长：" + distance + "公里;" + "所属公司：" + company+"&/td&&/tr&";
//绘制第一条路线
if(i==0) drawbusLine(startPot,endPot,pathArr);
resLine += "&/table&&/div&"
document.getElementById('result').innerHTML = resL
//绘制路线
function drawbusLine(startPot,endPot,BusArr) {
//自定义起点，终点图标
var sicon = new AMap.Icon({
image: "/Public/images/js/poi.png",
size: new AMap.Size(44,44),
imageOffset: new AMap.Pixel(-334, -180)
var eicon = new AMap.Icon({
image: "/Public/images/js/poi.png",
size: new AMap.Size(44,44),
imageOffset: new AMap.Pixel(-334, -134)
//绘制起点，终点
var stmarker = new AMap.Marker({
map:mapObj,
position:new AMap.LngLat(startPot.lng,startPot.lat), //基点位置
icon:sicon, //复杂图标
offset:{x:-16,y:-34}, //相对于基点的位置
var endmarker = new AMap.Marker({
map:mapObj,
position:new AMap.LngLat(endPot.lng,endPot.lat), //基点位置
icon:eicon, //复杂图标
offset:{x:-16,y:-34}, //相对于基点的位置
//绘制乘车的路线
busPolyline = new AMap.Polyline({
map:mapObj,
path:BusArr,
strokeColor:"#005cb5",//线颜色
strokeOpacity:0.8,//线透明度
strokeWeight:6//线宽
mapObj.setFitView();
//公交站点查询
function stationSearch() {
clearMap();
//加载公交站点查询插件
mapObj.plugin(["AMap.StationSearch"], function() {
//实例化公交站点查询类
var station = new AMap.StationSearch({
pageIndex: 1, //页码
pageSize: 10, //单页显示结果条数
city:'010'
//确定搜索城市
station.search('东直门'); //查询
AMap.event.addListener(station, 'complete', stationSearch_CallBack);
AMap.event.addListener(station, 'error', function(e) {);});
*公交站点查询返回数据解析
function stationSearch_CallBack(searchResult) {
clearMap();
var resultStr
= ""; //结果拼接String
var resultString = ;
var stationArr
= searchResult.stationI
var searchNum
= stationArr.
var iMarker
= searchResult.
if(searchNum & 0) {
resultStr += "&div id=\"divid" + i + "\"&&table&";
for(var i=0; i&searchN i++) {
//结果输出用表格展现
resultStr += "&tr&&td&&h3&&font color=\"#00a6ac\"&" + stationArr[i].name + "&/font&&/h3&&/td&&/tr&";
resultStr += "&tr&&td&途径该站点的公交线路:&/td&&/tr&&tr&&td&";
var stationBusArr = stationArr[i].
for(var j =0; j&stationBusArr. j++) {
resultStr += stationBusArr[j].name + "&br/&";
resultStr += "&/td&&/tr&&/table&&/div&"
document.getElementById("result").innerHTML = resultS
var stmarker = new AMap.Marker({
map:mapObj,
position:iMarker
document.getElementById("result").innerHTML = resultS
//步行导航
function walking_route() {
mapObj.plugin(["AMap.Walking"], function() {
MWalk = new AMap.Walking(); //构造路线导航类
AMap.event.addListener(MWalk, "complete", walk_routeCallBack); //返回导航查询结果
MWalk.search(start_xy, end_xy); //根据起终点坐标规划步行路线
//导航结果展示
function walk_routeCallBack(data) {
var routeS = data.
if (routeS.length &= 0) {
document.getElementById("result").innerHTML = "未查找到任何结果!&br /&建议：&br /&1.请确保所有字词拼写正确。&br /&2.尝试不同的关键字。&br /&3.尝试更宽泛的关键字。";
route_text="";
for(var v =0; v& routeS.v++){
//步行导航路段数
steps = routeS[v].
var route_count = steps.
//步行距离（米）
var distance = routeS[v].
//拼接输出html
for(var i=0 ;i& steps.i++) {
route_text += "&tr&&td align=\"left\" onMouseover=\"walkingDrawSeg('" + i + "')\"&" + i +"." +steps[i].instruction
+ "&/td&&/tr&";
//输出步行路线指示
route_text = "&table cellspacing=\"5 px\" &&tr&&td style=\"background:#e1e1e1;\"&路线&/td&&/tr&&tr&&td&&img src=\"/images/start.gif\" /&&&北京南站&/td&&/tr&" + route_text + "&tr&&td&&img src=\"/images/end.gif\" /&&&北京站&/td&&/tr&&/table&";
document.getElementById("result").innerHTML = route_
walkingDrawLine();
//绘制步行导航路线
function walkingDrawLine() {
//起点、终点图标
var sicon = new AMap.Icon({
image: "/Public/images/js/poi.png",
size:new AMap.Size(44,44),
imageOffset: new AMap.Pixel(-334, -180)
var startmarker = new AMap.Marker({
icon : sicon, //复杂图标
visible : true,
position : start_xy,
map:mapObj,
offset : {
var eicon = new AMap.Icon({
image: "/Public/images/js/poi.png",
size:new AMap.Size(44,44),
imageOffset: new AMap.Pixel(-334, -134)
var endmarker = new AMap.Marker({
icon : eicon, //复杂图标
visible : true,
position : end_xy,
map:mapObj,
offset : {
//起点到路线的起点 路线的终点到终点 绘制无道路部分
var extra_path1 = new Array();
extra_path1.push(start_xy);
extra_path1.push(steps[0].path[0]);
var extra_line1 = new AMap.Polyline({
map: mapObj,
path: extra_path1,
strokeColor: "#9400D3",
strokeOpacity: 0.7,
strokeWeight: 4,
strokeStyle: "dashed",
strokeDasharray: [10, 5]
var extra_path2 = new Array();
var path_xy = steps[(steps.length-1)].
extra_path2.push(end_xy);
extra_path2.push(path_xy[(path_xy.length-1)]);
var extra_line2 = new AMap.Polyline({
map: mapObj,
path: extra_path2,
strokeColor: "#9400D3",
strokeOpacity: 0.7,
strokeWeight: 4,
strokeStyle: "dashed",
strokeDasharray: [10, 5]
for(var s=0; s&steps. s++) {
var drawpath = steps[s].
var polyline = new AMap.Polyline({
map: mapObj,
path: drawpath,
strokeColor: "#9400D3",
strokeOpacity: 0.7,
strokeWeight: 4
mapObj.setFitView();
示例查看：
阅读(...) 评论()