入门：http://www.runoob.com/googleapi/google-maps-api-key.html /** * Google Map util 1.0 * @author yjx
入门：http://www.runoob.com/googleapi/google-maps-api-key.html
/** * Google Map util 1.0 * @author yjx * @date 2016.8.2 */var usmap = { map: null, geocoder: null, initialize: function(divID, lat, lng, zoom) { var mapProp = { center: new google.maps.LatLng(lat, lng), zoom: zoom, mapTypeId: google.maps.MapTypeId.ROADMAP, }; this.map = new google.maps.Map(document.getElementById(divID), mapProp); }, markersArray: [], setMarker: function(lat, lng, content) { var center = new google.maps.LatLng(lat, lng); var marker = new google.maps.Marker({ map: this.map, position: center, title: content }); this.markersArray.push(marker); // marker.setMap(this.map); if(typeof content != "undefined") { var infowindow = new google.maps.InfoWindow({ content: content }); infowindow.open(this.map, marker); } }, cleanMarker: function() { if(this.markersArray) { for(var i in this.markersArray) { this.markersArray[i].setMap(null); } } }, getLatLng: function(address, callback) { if(this.geocoder == null) { this.geocoder = new google.maps.Geocoder(); } this.geocoder.geocode({ 'address': address }, function(results, status) { if(status == google.maps.GeocoderStatus.OK) { var json = null; //alert(results[0]); if(results[0]) { json = { "address": results[0].formatted_address, "lat": results[0].geometry.location.lat(), "lng": results[0].geometry.location.lng(), }; } if(typeof(callback) == 'function') callback(json); // console.log(results[0].formatted_address); // console.log(results[0].geometry.location) } else { alert("Geocode was not successful for the following reason: " + status); } }); }, getAddress: function(lat, lng, callback) { if(this.geocoder == null) { this.geocoder = new google.maps.Geocoder(); } this.geocoder.geocode({ 'latLng': new google.maps.LatLng(lat, lng) }, function(results, status) { if(status == google.maps.GeocoderStatus.OK) { var json = new Array(); for(var i in results) { var temp = { "address": results[i].formatted_address, "lat": results[i].geometry.location.lat(), "lng": results[i].geometry.location.lng(), }; json.push(temp); } if(typeof(callback) == 'function') callback(json); } else { alert("Geocode was not successful for the following reason: " + status); } }); }, directionsRenderer: null, directionsService: null, setRoute: function(model, lat1, lng1, lat2, lng2, callback) { if(this.directionsRenderer == null) { this.directionsRenderer = new google.maps.DirectionsRenderer(); //地图路线显示对象 this.directionsService = new google.maps.DirectionsService(); //地图路线服务对象 this.directionsRenderer.setMap(this.map); } this.directionsRenderer.setMap(null); this.directionsRenderer.setMap(this.map); var startCenter = new google.maps.LatLng(lat1, lng1); var endCenter = new google.maps.LatLng(lat2, lng2); var travelMode = null; if(model == 0) { console.log("=================步行模式================="); travelMode = google.maps.DirectionsTravelMode.WALKING } else { console.log("=================驾车模式================="); travelMode = google.maps.DirectionsTravelMode.DRIVING; } this.directionsService.route({ origin: startCenter, destination: endCenter, unitSystem: google.maps.UnitSystem.METRIC, //单位为米 travelMode: travelMode, }, function(result, status) { if(status == google.maps.DirectionsStatus.OK) { usmap.directionsRenderer.setDirections(result); //标记路线 //console.log(result); var myRoute = result.routes[0].legs[0]; var json = { totalDistance: myRoute.distance.value, route: [] }; for(var i = 0; i < myRoute.steps.length; i++) { var temp = { "instructions": myRoute.steps[i].instructions, "distance": myRoute.steps[i].distance.value, }; json.route.push(temp); } if(typeof(callback) == 'function') callback(json); } }); }}调用
备注：usmap.initialize("googleMap", defaultLat, defaultLng, 13);
googleMap是div的ID
//默认坐标五羊邨 var defaultLat = 23.119848; var defaultLng = 113.31427899999994; if(navigator.geolocation) { //获取当前地理位置信息 navigator.geolocation.getCurrentPosition( function(position) { //当前经纬度 defaultLat = position.coords.latitude; defaultLng = position.coords.longitude; //初始化地图 usmap.initialize("googleMap", defaultLat, defaultLng, 13); usmap.setMarker(defaultLat, defaultLng, "我的位置"); }, function(error) { //用户不授权获取地理信息,按默认位置初始化地图 usmap.initialize("googleMap", defaultLat, defaultLng, 13); usmap.setMarker(defaultLat, defaultLng, "我的位置"); }); } else { //浏览器不支持获取地理信息,按默认位置初始化地图 usmap.initialize("googleMap", defaultLat, defaultLng, 13); usmap.setMarker(defaultLat, defaultLng, "我的位置"); } $("#setOut").click(function() { usmap.cleanMarker(); //出发地理坐标 var start_lat = null; var start_lng = null; //目标地理坐标 var end_lat = null; var end_lng = null; //出发地地址,如五羊邨 var startAddress = $("#start_address").val(); //目标地址,如广州塔 var endAddress = $("#end_address").val(); if(startAddress != "") { //根据地址获取经纬度 usmap.getLatLng(startAddress, function(result) { start_lat = result.lat; start_lng = result.lng; console.log(result.address); //console.log(result.lat + "," + result.lng); }); } else { start_lat = defaultLat; start_lng = defaultLng; } //根据地址获取经纬度 usmap.getLatLng(endAddress, function(result) { end_lat = result.lat; end_lng = result.lng; endAddress = result.address; //console.log(result.lat + "," + result.lng); }); var interval = setInterval(function() { if(start_lat != null && end_lat != null) { window.clearInterval(interval); //标记目的,并提示信息 usmap.setMarker(end_lat, end_lng, endAddress); //生成线路 usmap.setRoute(0, start_lat, start_lng, end_lat, end_lng, function(result) { $("#setOutDiv").hide(); $("#route").show(); $("#return").show(300); $("#totalDistance").html("总路程：" + result.totalDistance + "米"); for(var i in result.route) { $("#route ul").append( '<li class="table-view-cell">' + result.route[i].instructions + '</li>' ); //console.log(result.route[i].instructions); } }); } }, 500); }) $("#return").click(function() { $("#setOutDiv").show(); $("#route").hide(); $("#return").hide(300); }) /* usmap.getLatLng("胡志明市", function(result) { console.log(result.address); console.log(result.lat + "," + result.lng); }); usmap.getAddress(23.1065534, 113.32467339999994, function(result) { for(var i in result) { console.log(result[i].address); } })*/ </script>
