最近在項目遇到一個關於谷歌地圖的問題，看了下谷歌地圖api后實現了導航和定位的功能,特意記錄下，以便以后查看.
整個流程從服務端獲得目的地（簡稱 B）的經緯度地址，通過客戶端獲得用戶(簡稱A)的經緯度地址,
如果成功獲得B的經緯度就在地圖上顯示出A到B的駕車路徑,
如果沒有獲得A的經緯度則在地圖上顯示B的位置並明確標識.
拆分下整個需求，需要這些功能
1.渲染地圖;
2.在地圖上標識某地;
3.獲得用戶的經緯度;
4.在地圖上顯示導航路線.
--------------
1.顯示地圖；
引入入地圖api
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
看看谷歌官方的例子，渲染地圖很簡單的……
這是自己的代碼
<!DOCTYPE HTML>
<html lang="zh-ch">
<head>
<title>谷歌地圖</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="map.js" type="text/javascript"></script>
<style>
#map_canvas{
position: absolute;
left: 0;
top:0;
height:50%;
width:50%;
background: #fff8dc;
}
</style>
</head>
<body>
<div id="map_canvas">
</div>
</body>
</html>
js 代碼initMap 渲染地圖
var newMap = {a:{},b:{name:"目的地"}}; //全局變量 newMap.directionsDisplay = {}; newMap.directionsService = new google.maps.DirectionsService(); //這兩個是在導航的時候用到的 //初始化地圖 function initMap(mapCenter) { newMap.directionsDisplay = new google.maps.DirectionsRenderer(); var myOptions = { zoom:10, mapTypeId: google.maps.MapTypeId.ROADMAP, //地圖類型 center: mapCenter //LatLng 對象 } newMap.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
newMap.directionsDisplay.setMap(newMap.map); }
js 方法 calcRoute() 導航
//導航方法 function calcRoute(start,end) { var request = { origin:start, //開始的位置 （A） destination:end, //開始的位置 （B） travelMode: google.maps.TravelMode.DRIVING //導航類型 駕駛 }; newMap.directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); } }); }
2.獲得用戶的當前的地理位置信息
使用html5的方法來 geolocation.getCurrentPosition() 獲得地址，這方法在移動設備上好用，pc上不好用. 這個和有沒有網絡沒有關系,沒有網絡也是可用的
function getLatLng(){ if( navigator.geolocation ) { function gpsSuccess(pos){ if( pos.coords ){ newMap.a.lat = pos.coords.latitude; newMap.a.lng = pos.coords.longitude; } else{ newMap.a.lat = pos.latitude; newMap.a.lng = pos.longitude; } var userPositon = new google.maps.LatLng(newMap.a.lat,newMap.a.lng); var crsPositon = new google.maps.LatLng(newMap.b.lat,newMap.b.lng); initMap(userPositon); calcRoute(userPositon,crsPositon); addMarker(crsPositon,newMap.map,newMap.b.name); addMarker(userPositon,newMap.map, "您當前位置"); } function gpsFail(){ alert('無法獲取您的地理位置信息'); var obj = new google.maps.LatLng(newMap.b.lat,newMap.b.lng); initMap(obj); addMarker(obj,newMap.map, newMap.b.name); } navigator.geolocation.getCurrentPosition(gpsSuccess, gpsFail, {enableHighAccuracy:true, maximumAge: 3000000,timeout:20*1000}); } }
還有一問題在地圖上標識某地
//向地圖上添加某地標識 function addMarker(location,map,contentString) { var marker = new google.maps.Marker({ position: location, 'draggable': false, 'animation': google.maps.Animation.DROP, map: map }); var infowindow = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListener(marker, 'click', function(){ infowindow.open(map,marker); }); }
把這些方法拼裝起來ok
ok完整的例子