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

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 地图 api v3 上显示标记

show marker only on zoom level 15 google map api v3

javascript

google-maps

google-maps-api-3