GoogleMap: Zählen Sie die Anzahl der Marker jedes Typs und aktualisieren Sie sofort das Ergebnis, wenn ich neue Marker hinzufügen

-2

Ich habe diesen Code, mit dem ich Marker verschiedener Typen auf einer Karte hinzufügen kann, indem Sie sie in die Karte ziehen.GoogleMap: Zählen Sie die Anzahl der Marker jedes Typs und aktualisieren Sie sofort das Ergebnis, wenn ich neue Marker hinzufügen

<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
     <title>TEST1</title> 

     <style type="text/css"> 
      *{ 
       margin: 0px; 
       padding: 0px; 
      } 
      html { height: 100% } 
      body{ height: 100%; margin: 0px; padding: 0px;} 
      #map_canvas { height: 80% ; width:70%;clear:none} 
      #shelf{position:relative; top:10px; height:20%;width:100%;background:white;opacity:0.7;} 
      #draggable {position:absolute; top:15px;left:50px; width: 30px; height: 50px;z-index:1000000000;} 
     </style> 
     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 

       $("#draggable1").draggable({helper: 'clone', 
        stop: function(e,ui) { 
         var mOffset=$($map.getDiv()).offset(); 
          var point=new google.maps.Point(
           ui.offset.left-mOffset.left+(ui.helper.width()/2), 
           ui.offset.top-mOffset.top+(ui.helper.height()) 
         ); 
         var ll=overlay.getProjection().fromContainerPixelToLatLng(point); 
         var icon = $(this).attr('src'); 
         placeMarker(ll, icon); 
        } 
       }); 
       $("#draggable2").draggable({helper: 'clone', 
        stop: function(e,ui) { 
         var mOffset=$($map.getDiv()).offset(); 
          var point=new google.maps.Point(
           ui.offset.left-mOffset.left+(ui.helper.width()/2), 
           ui.offset.top-mOffset.top+(ui.helper.height()) 
         ); 
         var ll=overlay.getProjection().fromContainerPixelToLatLng(point); 
         var icon = $(this).attr('src'); 
         placeMarker(ll, icon); 
        } 
       }); 

      }); 
     </script> 
     <script type="text/javascript"> 
      var $map; 
      var $latlng; 
      var overlay; 

      function initialize() { 
       var $latlng = new google.maps.LatLng(50.5833, 5.8667); 
       var myOptions = { 
        zoom: 18, 
        center: $latlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        mapTypeControlOptions: { 
         style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
         position: google.maps.ControlPosition.TOP_LEFT }, 
        zoomControl: true, 
        zoomControlOptions: { 
         style: google.maps.ZoomControlStyle.LARGE, 
         position: google.maps.ControlPosition.LEFT_TOP 
        }, 
        scaleControl: true, 
        scaleControlOptions: { 
         position: google.maps.ControlPosition.TOP_LEFT 
        }, 
        streetViewControl: false, 

        panControl:false, 

       }; 
       $map = new google.maps.Map(document.getElementById("map_canvas"), 
       myOptions); 

       overlay = new google.maps.OverlayView(); 
       overlay.draw = function() {}; 
       overlay.setMap($map); 


      } 
      function placeMarker(location, icon) { 
       var marker = new google.maps.Marker({ 
        position: location, 
        map: $map, 
        draggable: true, 
        icon: icon 
       }); 

      } 

      function countMarkers(markers) { 
      var count = 0; 
      $.each(markers, function (i, marker) { 
      console.log(marker.visible); 
      if (marker.visible == true) { 
      count++; 
      } 
      }); 
      $('#countBox').val(count); 
      } 

     </script> 
    </head> 
    <body onload="initialize()"> 
     <div id="map_canvas"></div> 
     <div id='shelf'> 
     <img src="spring-hot.png" id="draggable1" />Total : X<br><img src="spring-cold.png" id="draggable2" />Total : Y 
     </div> 

    </body> 
</html>

Ich mag jeden Markentyp unter meiner Karte die Gesamtmenge von Markern dieser Art auf der Karte neben zeigen, und automatisch aktualisiert diese Gesamtmenge jedes Mal i eine neue Markierung hinzufügen zu meiner Karte.

Ich nehme an, es könnte leicht sein, es zu tun, aber ich finde wirklich nicht wie!

Könnten Sie mir bitte helfen?

Quelle

2016-09-29 Valérian Larose

Welche Ansätze haben Sie versucht, so weit zu finde die Anzahl der Marker? –

Versuchen Sie zwei Arrays beizubehalten, eines für jeden Markentyp (zB var markerType1 = []; markerType2 = [] `). Dann, anstatt nur die Funktion placeMarker aufzurufen, drücken Sie den neuen Marker in das entsprechende Array, indem Sie markerType1.push (placeMarker (ll, icon)) ausführen.

dann Ihre Ortsmarkierung Funktion ändern, um die neue Markierung zurückzukehren, wie so

return new google.maps.Marker({ 
        position: location, 
        map: $map, 
        draggable: true, 
        icon: icon 
       });

Dann können Sie einfach die Array-Längen verwenden, um die Markierungen zu zählen:

markerType1.length

Quelle

2016-09-29 22:12:04 jperry1147

Vielen Dank für Ihre Antwort, aber leider verstehe ich nicht ... Ich bin nur ein Anfänger und ich weiß nicht einmal, was ist ein Array ... Ich habe diesen Code durch das Zusammenstellen verschiedener Fragmente von Codes ich gefunden auf Das Web, aber ich bin nicht spezialisiert genug ... also ich denke, ich sollte mehr über Javascript lernen, bevor ich es versuche ... –

GoogleMap: Zählen Sie die Anzahl der Marker jedes Typs und aktualisieren Sie sofort das Ergebnis, wenn ich neue Marker hinzufügen

Antwort

Verwandte Themen