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=" 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=" 100%; height: 800px"></div>
<div id = "div_json"></div>
</body>
</html>
效果图：
