Google Map v3 自用工具类（javascript）

2019独角兽企业重金招聘Python工程师标准>>>

入门：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>

 

转载于:https://my.oschina.net/yejunxi/blog/726870