JavaScript Google Maps API V3 Javascript完整示例

Posted 2021-05-20

window.onload = function(){
		// Define addresses, define varible for the markers, define marker counter
		var addrs = ['219 4th Ave N Seattle Wa 98109','200 2nd Avenue North Seattle Wa 98109','325 5th Ave N Seattle Wa 98109'];
		var markers = [];
		var marker_num = 0;
		// Process each address and get it's lat long
		var geocoder = new google.maps.Geocoder();
		var center = new google.maps.LatLngBounds();
		for(k=0;k<addrs.length;k++){
			var addr = addrs[k];
			geocoder.geocode({'address':addr},function(res,stat){
				if(stat==google.maps.GeocoderStatus.OK){
					// add the point to the LatLngBounds to get center point, add point to markers
					center.extend(res[0].geometry.location);
					markers[marker_num]=res[0].geometry.location;
					marker_num++;
					// actually display the map and markers, this is only done the last time
					if(k==addrs.length){
						// actually display the map
						var map = new google.maps.Map(document.getElementById("the_map"),{
							'center': center.getCenter(),
							'zoom': 14,
							'streetViewControl': false,
						    'mapTypeId': google.maps.MapTypeId.ROADMAP, // Also try TERRAIN!
						    'noClear':true,
						});
						// go through the markers and display them
						for(p=0;p<markers.length;p++){
							var mark = markers[p];
							new google.maps.Marker({
								'icon':'mapmarker.png',
								//'animation':google.maps.Animation.DROP, // This lags my computer somethin feirce
								'title':addrs[p],
								'map': map,
								'position': mark,
								})
						}
						// zoom map so all points can be seen
						map.fitBounds(center)
						// Styleize the map, doing this with the initial map options never seems to work
						map.setOptions({styles:[
							{
								featureType:"all",
								elementType:"labels",
								stylers:[
									{visibility:"off"},
								]
							},
							{
								featureType:"all",
								elementType:"all",
								stylers:[
									{saturation:-100}
								]
							},
							{
								featureType:"road",
								elementType:"all",
								stylers:[
									{hue:'#FF5500'},
									{saturation:75},
									{lightness:0}
								]
							},
							{
								featureType:"transit",
								elementType:"all",
								stylers:[
									{hue:'#FF5500'},
									{saturation:75},
									{lightness:0}
								]
							},
							{
								featureType:"landscape.man_made",
								elementType:"administrative",
								stylers:[
									{hue:'#FF5500'},
									{saturation:25},
									{lightness:0}
								]
							},
							{
								featureType:"water",
								elementType:"geometry",
								stylers:[
									{visibility:"off"},
									{saturation:-100}
								]
							},
							{
								featureType: "poi",
								stylers: [
									{ lightness: 70 }
								]
							},
 						]});
					}
				}else{
					console.log('can\'t find address');
				}
			});
		}
	}