Question

正如你在地图上看到的，我想隐藏所有缩放级别的文本（图像），但是在15中。你能帮帮我吗？这里有一些zoom_changed的例子 https://developers.google.com/maps/documentation/javascript/events

$(document).ready(function() {

	var mapCenter = new google.maps.LatLng(38.153850,40.949821); //Google map Coordinates
	var map;
	map_initialize(); // initialize google map
	
	//############### Google Map Initialize ##############
	function map_initialize()
	{
			var googleMapOptions = 
			{ 
				center: mapCenter, // map center
				zoom: 15, //zoom level, 0 = earth view to higher value
				maxZoom: 20,
				minZoom: 6,
				streetViewControl: false, // desactiver le zoom
				zoomControlOptions: {
				style: google.maps.ZoomControlStyle.BIG //zoom control size
			},
				scaleControl: true, // enable scale control
				mapTypeId: google.maps.MapTypeId.HYBRID // google map type
			};
		
		   	map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);	



	{
	
	
var label = new google.maps.Marker({
    position: new google.maps.LatLng(38.153850,40.949821),
    map: map,
    icon: "https://kocer.org/map_src/imgs/test.png"
});	
	





	
			//Load Markers from the XML File, Check (process.php)
			$.get("map_src/process.php", function (data) {
				$(data).find("marker").each(function () {
					  var name 		= $(this).attr('name');
					  var description 	= '<p>'+ $(this).attr('description') +'</p>';
					  var type 		= $(this).attr('type');
					  var point 	= new google.maps.LatLng(parseFloat($(this).attr('lat')),parseFloat($(this).attr('lng')));
					  create_marker(point, name, description, false, false, false, "map_src/imgs/kesk.png");
				});
			});	
			}







			
			//Right Click to Drop a New Marker
			google.maps.event.addListener(map, 'rightclick', function(event) {
				//Edit form to be displayed with new marker
				var EditForm = '<p><div class="marker-edit">'+
				'<form action="map_src/ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker">'+
				'<label for="pName"><span>Nav :</span><input type="text" name="pName" class="save-name" maxlength="40" /></label>'+
				'<label for="pDesc"><span>Derheq :</span><textarea name="pDesc" class="save-desc" maxlength="150"></textarea></label>'+
				'<label for="pType"><span>T&icirc;pa C&icirc;h :</span> <select name="pType" class="save-type"><option value="gund">Gund</option><option value="navce">Nav&ccedil;e</option><option value="bajar">Bajar</option>'+
				'<option value="tax">Tax</option></select></label>'+
				'</form>'+
				'</div></p><button name="save-marker" class="save-marker">&Ccedil;&ecirc; bike</button>';

				//Drop a new Marker with our Edit Form
				create_marker(event.latLng, 'C&icirc;hek N&ucirc;', EditForm, true, true, true, "map_src/imgs/sor.png");
			});


			
			//Right Click to Drop a New Marker
			google.maps.event.addListener(map, 'longpress', function(event) {
				//Edit form to be displayed with new marker
				var EditForm = '<p><div class="marker-edit">'+
				'<form action="map_src/ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker">'+
				'<label for="pName"><span>Nav :</span><input type="text" name="pName" class="save-name" maxlength="40" /></label>'+
				'<label for="pDesc"><span>Derheq :</span><textarea name="pDesc" class="save-desc" maxlength="150"></textarea></label>'+
				'<label for="pType"><span>T&icirc;pa C&icirc;h :</span> <select name="pType" class="save-type"><option value="gund">Gund</option><option value="navce">Nav&ccedil;e</option><option value="bajar">Bajar</option>'+
				'<option value="tax">Tax</option></select></label>'+
				'</form>'+
				'</div></p><button name="save-marker" class="save-marker">&Ccedil;&ecirc; bike</button>';

				//Drop a new Marker with our Edit Form
				create_marker(event.latLng, 'C&icirc;hek N&ucirc;', EditForm, true, true, true, "map_src/imgs/sor.png");
			});


 // Bounds for Kurdistan
 var strictBounds = new google.maps.LatLngBounds(
 new google.maps.LatLng(34.759666,35.923462),
 new google.maps.LatLng(42.642041,47.206421));

 // Listen for the dragend event
 google.maps.event.addListener(map, 'dragend', function () {
     if (strictBounds.contains(map.getCenter())) return;

     // We're out of bounds - Move the map back within the bounds

     var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = strictBounds.getNorthEast().lng(),
         maxY = strictBounds.getNorthEast().lat(),
         minX = strictBounds.getSouthWest().lng(),
         minY = strictBounds.getSouthWest().lat();

     if (x < minX) x = minX;
     if (x > maxX) x = maxX;
     if (y < minY) y = minY;
     if (y > maxY) y = maxY;

     map.setCenter(new google.maps.LatLng(y, x));
 });										


  	}



	//############### Create Marker Function ##############
	function create_marker(MapPos, MapTitle, MapDesc,  InfoOpenDefault, DragAble, Removable, iconPath)
	{	  	  		  
		
		//new marker
		var marker = new google.maps.Marker({
			position: MapPos,
			map: map,
			draggable:DragAble,
			icon: iconPath
		});

		
		//Content structure of info Window for the Markers
		var contentString = $('<div class="marker-info-win">'+
		'<div class="marker-inner-win"><span class="info-content">'+
		'<h1 class="marker-heading">'+MapTitle+'</h1>'+
		MapDesc+ 
		'</span><button name="remove-marker" class="remove-marker"></button>'+
		'</div></div>');	

		
		//Create an infoWindow
		var infowindow = new google.maps.InfoWindow();
		//set the content of infoWindow
		infowindow.setContent(contentString[0]);

		//Find remove button in infoWindow
		var removeBtn 	= contentString.find('button.remove-marker')[0];
		var saveBtn 	= contentString.find('button.save-marker')[0];

		//add click listner to remove marker button
		google.maps.event.addDomListener(removeBtn, "click", function(event) {
			remove_marker(marker);
		});
	
		if(typeof saveBtn !== 'undefined') //continue only when save button is present
		{
			//add click listner to save marker button
			google.maps.event.addDomListener(saveBtn, "click", function(event) {
				var mReplace = contentString.find('span.info-content'); //html to be replaced after success
				var mName = contentString.find('input.save-name')[0].value; //name input field value
				var mDesc  = contentString.find('textarea.save-desc')[0].value; //description input field value
				var mType = contentString.find('select.save-type')[0].value; //type of marker
				
				
					save_marker(marker, mName, mDesc, mType, mReplace); //call save marker function
			
			});
		}
		
		//add click listner to save marker button		 
		google.maps.event.addListener(marker, 'click', function() {
				infowindow.open(map,marker); // click on marker opens info window 
	    });
		  
		if(InfoOpenDefault) //whether info window should be open by default
		{
		  infowindow.open(map,marker);
		}
	}
	
	//############### Remove Marker Function ##############
	function remove_marker(Marker)
	{
		
		/* determine whether marker is draggable 
		new markers are draggable and saved markers are fixed */
		if(Marker.getDraggable()) 
		{
			Marker.setMap(null); //just remove new marker
		}
		else
		{
			//Remove saved marker from DB and map using jQuery Ajax
			var mLatLang = Marker.getPosition().toUrlValue(); //get marker position
			var myData = {del : 'false', latlang : mLatLang}; //post variables
			$.ajax({
			  type: "POST",
			  url: "map_src/process.php",
			  data: myData,
			  success:function(data){
					Marker.setMap(null); 
				},
				error:function (xhr, ajaxOptions, thrownError){
				}
			});
		}

	}
	
	//############### Save Marker Function ##############
	function save_marker(Marker, mName, mAddress, mType, replaceWin)
	{
		//Save new marker using jQuery Ajax
		var mLatLang = Marker.getPosition().toUrlValue(); //get marker position
		var myData = {name : mName, description : mAddress, latlang : mLatLang, type : mType }; //post variables
		console.log(replaceWin);		
		$.ajax({
		  type: "POST",
		  url: "map_src/process.php",
		  data: myData,
		  success:function(data){
				replaceWin.html(data); //replace info window with new html
				Marker.setDraggable(true); //set marker to fixed
				Marker.setIcon('map_src/imgs/zer.png'); //replace icon
            },
            error:function (xhr, ajaxOptions, thrownError){
            }
		});


		}

  
  google.maps.event.addDomListener(window, 'load', initialize);

}
	);

#google_map { position: absolute; height: 537px; width:1005px; }
.marker-edit label{display:block;margin-bottom: 5px;}
.marker-edit label span {width: 100px;float: left;}
.marker-edit label input, .marker-edit label select{height: 24px;}
.marker-edit label textarea{height: 60px;}
.marker-edit label input, .marker-edit label select, .marker-edit label textarea {width: 60%;margin:0px;padding-left: 5px;border: 1px solid #DDD;border-radius: 5px;}

h1.marker-heading{color: #585858;margin: 0px;padding: 0px;font: 18px "Trebuchet MS", Arial;border-bottom: 1px solid #D8D8D8;}
div.marker-info-win {max-width: 300px;margin-right: -20px;}
div.marker-info-win p{padding: 0px;margin: 10px 0px 10px 0;}
div.marker-inner-win{padding: 5px;}
button.save-marker, button.remove-marker{font_size:16px; border: none;background: rgba(0, 0, 0, 0);color: #00F;padding: 0px;text-decoration: underline;margin-right: 10px;cursor: pointer;
}

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript" src="https://kocer.org/javascripts/latest-jquery.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

</head>
  <body onload="load()">
    <div id="google_map" style="width: 500px; height: 300px"></div>
  </body>

</html>

Answer 1

只需添加以下内容：

google.maps.event.addListener(map, 'zoom_changed', function(e) {
  if(map.zoom == 15) {
    label.setMap(map);
  }
  else {
    label.setMap(null);
  }
});

仅在缩放级别15 google map api v3上显示标记

1 个答案: