2015年第一篇博客；
谷歌地图接口：
Google Directions API
demo code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps get Around</title>
<script src="./tpl/Home/vifnn/common/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script type="text/javascript">
var infowindow,marker,marker_start,marker_end,info_start,info_end;
var geocoder = new google.maps.Geocoder();
var point,map;
var colorArray = new Array(
\'#FF0000\',\'#FF00FF\',\'#D15FEE\',\'#B03060\',
\'#00CD00\',\'#0F0F0F\',\'#1E90FF\',\'#66CDAA\',
\'#87CEFF\',\'#7D9EC0\',\'#8B7B8B\',\'#CD2990\',
\'#BDB76B\',\'#BC8F8F\',\'#BF3EFF\',\'#BC8F8F\',
\'#B4EEB4\',\'#AB82FF\',\'#A52A2A\',\'#8E388E\',
\'#8B8B00\',\'#98F5FF\',\'#CD3333\',\'#EE2C2C\'
);
var arr_map = new Array();
function initialize() {
//var point = new google.maps.LatLng(18.252847, 109.511909);
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
point = new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude
);
loadMap(point);
});
} else {
// Browser doesn\'t support Geolocation
handleNoGeolocation();
}
}
function loadMap(point){
var myOptions = {
zoom: 13,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
overviewMapControl: false,
scaleControl: false,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
position: point,
map: map
});
marker.setDraggable(true);
infowindow = new google.maps.InfoWindow({
content: "",
size: new google.maps.Size(50,50)
});
google.maps.event.addListener(marker, \'dragend\', function(){
showAddress(map, marker);
});
google.maps.event.addListener(marker, \'click\', function(){
showAddress(map, marker);
});
google.maps.event.addListener(map, \'click\', function(e) {
clickMou(map,marker,e.latLng);
});
showAddress(map,marker);
}
function handleNoGeolocation() {
point = new google.maps.LatLng(28.127907999999998, 112.98059999999998);
loadMap(point);
}
function makeInfo(obj,latlng){
var address = obj[1].formatted_address + "<br />";
address = obj[0].formatted_address + "<br />";
address += "纬度：" + latlng.lat() + "<br />";
address += "经度：" + latlng.lng();
infowindow.setContent(address);
infowindow.open(map, marker);
}
function showAddress(map, marker)
{
var latlng = marker.getPosition();
geocoder = new google.maps.Geocoder();
geocoder.geocode({\'latLng\': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
makeInfo(results,latlng)
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
function clickMou(map, marker,location)
{
marker.setPosition(location)
geocoder.geocode({\'latLng\': location}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
makeInfo(results,latlng)
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
function initializeMarksAndInfo(){
info_start = new google.maps.InfoWindow({
content: "",
size: new google.maps.Size(50,50)
});
info_end = new google.maps.InfoWindow({
content: "",
size: new google.maps.Size(50,50)
});
}
function markAndInfo(point,content,parm){
if(parm == 1){
if(marker_start == undefined){
marker_start = new google.maps.Marker({
position: point,
map: map
});
}else{
marker_start.setPosition(point);
}
info_start.setContent(content);
info_start.open(map, marker_start);
}else{
if(marker_end == undefined){
marker_end = new google.maps.Marker({
position: point,
map: map
});
}else{
marker_end.setPosition(point)
}
info_end.setContent(content);
info_end.open(map, marker_end);
}
}
$(function(){
modeToSelect(\'driving\');
initializeMarksAndInfo();
$("#typeway").change(function(){
$mode = $(this).val()
modeToSelect($mode);
})
$("button").click(function(){
$("#div_json").empty();
$("#disc_desc").empty();
$mode = $("#typeway").val();
$json = getJson($mode);
$.get("/index.php?g=Home&m=Map&a=getDirection&r=" + Math.random(),$json
, function(data, textStatus) {
//$("#div_json").text(data);
$obj = eval("("+data+")");
if(arr_map.length > 0){
for(var m = 0; m < arr_map.length; m++){
arr_map[m].setMap(null);
}
arr_map.splice(0,arr_map.length);
}
if($obj.status == "OK"){
for(var j = 0; j <$obj.routes.length;j++ ){
$data_array = $obj.routes[j].legs[0];
$point_start = new google.maps.LatLng($data_array.start_location.lat,$data_array.start_location.lng);
$point_end = new google.maps.LatLng($data_array.end_location.lat,$data_array.end_location.lng);
$address_start = $data_array.start_address + "<br />";
$address_start += "纬度：" + $data_array.start_location.lat + "<br />";
$address_start += "经度：" + $data_array.start_location.lng;
$address_end = $data_array.end_address + "<br />";
$address_end += "纬度：" + $data_array.end_location.lat+ "<br />";
$address_end += "经度：" + $data_array.end_location.lng;
markAndInfo($point_start,$address_start,1);
markAndInfo($point_end,$address_end,2);
$("#div_json").append(\'<div>方案\'+(j+1)+\':\'+$obj.routes[j].summary+\'全程\'+$data_array.distance.text+\',大约耗时\'+$data_array.duration.text+"</div>");
$data_steps = $data_array.steps;
if($mode == \'transit\'){
for(var i =0; i< $data_steps.length;i++){
$temp = $data_steps[i];
$("#div_json").append("<div>step"+(j+1)+"_"+(i+1)+":"+$temp.html_instructions+""+$temp.distance.text+"耗时"+$temp.duration.text+"</div>");
if($temp.travel_mode == \'WALKING\'){
$temp_arr = $temp[\'steps\'];
if($temp_arr.length > 1){
for(var i_i = 0; i_i < $temp_arr.length; i_i++){
$temp = $temp_arr[i_i];
$("#div_json").append("<div>step"+(j+1)+"_"+(i+1)+"_"+(i_i+1)+":"+$temp.html_instructions+""+$temp.distance.text+"耗时"+$temp.duration.text+"</div>");
}
}
}else{
$temp = $temp.transit_details;
$("#div_json").append("<div>"+$temp.line.short_name+"--"+($temp.headway)/60+"/趟</div>");
$("#div_json").append("<div>"+$temp.departure_stop.name+"--"+$temp.arrival_stop.name+"--共"+$temp.num_stops+"站</div>");
}
}
}else{
for(var i =0; i< $data_steps.length;i++){
$temp = $data_steps[i];
$("#div_json").append("<div>step"+(j+1)+"_"+(i+1)+":"+$temp.html_instructions+""+$temp.distance.text+"耗时"+$temp.duration.text+"</div>");
}
}
/*var marker_new = new google.maps.Marker({
position: $obj.routes[0].overview_polyline.points,
map: map
});*/
var encodedPoints = $obj.routes[j].overview_polyline.points;
var decodedPoints = google.maps.geometry.encoding.decodePath(encodedPoints) ;
arr_map[j] = new google.maps.Polyline ( {
strokeColor: colorArray[j] ,
strokeOpacity: 1.0 ,
strokeWeight: 2 ,
path: decodedPoints ,
clickable: false
})
arr_map[j].setMap(map)
}
}else{
alert(\'没有找到路线\')
}
});
});
})
function getJson(type){
$start = $("#start").val();
$end = $("#end").val();
$json = {\'start\':$start,\'end\':$end,\'type\':type};
if(type != "transit"){
$json.alternatives = $("#alternatives").val();
$json.avoid = $(\':radio[name="avoid"]:checked\').val();
}else{
$json.start_time = $("#start_time").val();
$json.end_time = $("#end_time").val();
}
return $json;
}
function modeToSelect(type){
var html_first = \'<option value="false" selected>单路线查询<option value="true">多线路查询\';
var html_second = \'<input type="radio" name="avoid" value= "highways" >避开高速公路<input type="radio" name="avoid" value= "tolls">避开收费公路/桥梁\';
var html_third = \'<input type="radio" name="avoid" value= "highways" >观光路线\';
var html_forth;
$("#alternatives").empty();
$("#alternatives").hide()
$("#avoid").empty();
$("#avoid").hide()
$("#start_time").empty();
$("#start_time").hide()
$("#end_time").empty();
$("#end_time").hide()
$("#bus_desc").hide();
switch (type){
case "driving":
$("#alternatives").append(html_first);
$("#alternatives").fadeIn();
$("#avoid").append(html_second);
$("#avoid").fadeIn();
break;
case "bicycling":
$("#alternatives").append(html_first);
$("#alternatives").fadeIn();
$("#avoid").append(html_third);
$("#avoid").fadeIn();
break;
case "transit":
for(var i = 0; i<24; i++){
if(i >=10){
html_forth += \'<option value="\'+i+\':00:00">\'+i+\':00:00\';
html_forth += \'<option value="\'+i+\':30:00">\'+i+\':30:00\';
}else{
//09:42:22
if(i == 6){
html_forth += \'<option value="0\'+i+\':00:00" selected>0\'+i+\':00:00\';
}else{
html_forth += \'<option value="0\'+i+\':00:00">0\'+i+\':00:00\';
}
html_forth += \'<option value="0\'+i+\':30:00">0\'+i+\':30:00\';
}
}
$("#start_time").append(html_forth);
$("#start_time").fadeIn();
$("#end_time").append(html_forth);
$("#end_time").fadeIn();
$("#bus_desc").fadeIn();
break;
case "walking":
$("#alternatives").append(html_first);
$("#alternatives").fadeIn();
$("#avoid").append(html_third);
$("#avoid").fadeIn();
break;
default:
return;
}
}
</script>
</head>
<body onload="initialize()">
<select id="typeway" style="width: 30%;" >
<option value="driving" selected>驾车
<option value="bicycling">骑行
<option value="walking">步行
<option value="transit">公交
</select>
<select id = \'alternatives\' style = "display:none">
</select>
<span style="display: none" id = "avoid">
</span>
<span id = "bus_desc" style="display: none">公交车运行时间：</span>
<select id = \'start_time\' style = "display: none">
</select>
<select id = \'end_time\' style = "display: none">
</select>
输入起点位置:<input type = "text" name = "start" id = "start"value = "长沙 火车站" >
输入目的地:<input type = "text" name = "end" id = "end" value = "长沙 火车南站" >
<button>搜路线</button>
<div id="map_canvas" style="width: 100%; height: 800px"></div>
<div id = "div_json"></div>
</body>
</html>
效果图：