我可以从.js文件导入多少个标记？

Question

我正在尝试将.js文件中的标记导入我的Google地图。 我使用Google Maps Javascript API v3。

如果.js文件包含太多标记，则地图不会显示任何标记。 当我删除.js文件中的某些标记时，地图会显示.js文件中的所有标记。 这有什么问题？

我想从.js文件中导入1,000~3,000个标记，并仅在地图上的可见边界中显示标记。 读取.js文件时是否有任何标记限制？

我不使用JQuery，node.js。

我是否需要回拨功能？请帮帮我。

提前致谢。

a.html

...
<script src="js/markers.js"></script>
...
<script type="text/javascript">

var mymap;     // one map
...

function showMarker(eachLocations) {

  // get the center of the map and zoom level
  var new_center = mymap.getCenter();

  defaultLat = new_center.lat();
  defaultLon = new_center.lng();

  var zoomLevel = mymap.getZoom();

  var marker,i;
  var pin_image_url = "/common/images/marker_img.png";
  var myMarkerIcon;

  var bounds = mymap.getBounds();
  var ne = bounds.getNorthEast(); // LatLng of the north-east corner
  var sw = bounds.getSouthWest(); // LatLng of the south-west corder

  var nw = new google.maps.LatLng(ne.lat(), sw.lng());
  var se = new google.maps.LatLng(sw.lat(), ne.lng());

  // for each location
  for (i = 0; i < eachLocations.length; i++) {

    // custom marker
    myMarkerIcon = new
    google.maps.MarkerImage(pin_image_url,null,null,null,new
    google.maps.Size(32,37));

    if (eachLocations[i][1] >= se.lat() && eachLocations[i][1] <= nw.lat() && eachLocations[i][2] >= nw.lng() && eachLocations[i][2] <= se.lng()) {

      marker = new google.maps.Marker({
         position: new google.maps.LatLng(eachLocations[i][1], eachLocations[i][2]),
         map: mymap,
         icon: myMarkerIcon
      });

      markers.push(marker);

      // listner for marker
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
      // click,dblclick,mouseup,mousedown,mouseout
         return function() {
            // if any infowindow has already shown, hides it and shows the new one
            if (infowindow) infowindow.close();

            // make the infoWindow of the first marker
            infowindow = new google.maps.InfoWindow({
            map: mymap,
            position: new google.maps.LatLng(eachLocations[i][1], eachLocations[i][2])
         });

         infowindow.setContent('<div style="width:250px;text-align: center;font-size:10pt;font-family:Arial,Verdana;font-weight:bold";>'+eachLocations[i][0]+'</div>');
         infowindow.open(mymap, marker);

         }
      })(marker, i));

    } // end of if the location is in the bounds

  } // end of for each locations

} // end of function



function initialize() {

   var mapDiv=document.getElementById("mapholder");

   var myOptions={
       center:new google.maps.LatLng(defaultLat,defaultLon),
       zoom:defaultZoomLevel,
       mapTypeId:google.maps.MapTypeId.ROADMAP,
       zoomControl: true, // by default
       zoomControlOptions: {style: google.maps.ZoomControlStyle.LARGE},
       mapTypeControl:false,
       navigationControlOptions: 
          {style:google.maps.NavigationControlStyle.SMALL}
   };

   // make map instance
   mymap=new google.maps.Map(mapDiv,myOptions);

   // Create the DIV to hold the control and
   // call the CenterControl() constructor passing in this DIV
   var centerControlDiv = document.createElement('div');
   var centerControl = new CenterControl(centerControlDiv, mymap);

   centerControlDiv.index = 1;
   mymap.controls[google.maps.ControlPosition.BOTTOM_LEFT].push( centerControlDiv);

   getLocation();

   google.maps.event.addListener(mymap, 'idle', function(ev){
      var new_center = mymap.getCenter();
      defaultLat = new_center.lat();
      defaultLon = new_center.lng();

      // you may have too many markers problem
      // so, before sending array, you have to rearrange markers to show

      var bounds = mymap.getBounds();
      var ne = bounds.getNorthEast(); // LatLng of the north-east corner
      var sw = bounds.getSouthWest(); // LatLng of the south-west corder

      var nw = new google.maps.LatLng(ne.lat(), sw.lng());
      var se = new google.maps.LatLng(sw.lat(), ne.lng());

      var markers2show = [];

      var lengthofarray = myLocations.length;

      for (i=0;i<myLocations.length;i++) {

         // limit the markers for the new bound
         if (myLocations[i][1] >= se.lat() && myLocations[i][1] <= nw.lat() && myLocations[i][2] >= nw.lng() && myLocations[i][2] <= se.lng()) {

             markers2show.push(myLocations[i]);
         }

      }

      showMarker(markers2show);
   });

   // close the previous info window of marker when click the map
   google.maps.event.addListener(mymap, 'click', function() {
      infowindow.close();
   });

   showMarker(myLocations);

}

...

<body onload="initialize()">

...

JS / markers.js

var myLocations = [
['A Location',37.007756,140.750864],
['B Location',37.111598,140.424843],
['C Location',36.881268,140.025215]
];