在视图中查找标记（不在群集中）

时间：2015-09-12 22:34:13

标签： google-maps google-maps-api-3 google-maps-markers

我在群集中的地图上有大约2,000个标记。

当用户平移/缩放地图时，我想找到视图中的标记，然后在表格中显示这些位置。

我循环浏览标记然后使用下面的标记来查看标记是否在地图的边界内。

 <i class="fa fa-ban text-danger"></i>

根据我的理解，标记总是在视图中，即使它们在群集中也是如此。我需要检查标记是否真的可见。

我在此图片中的三个蓝色标记之后，忽略剩余的簇。 http://snag.gy/aCUBR.jpg

完整代码：

if( map.getBounds().contains( markers[i].getPosition() ) )

代码的工作示例： http://46.101.40.40/map/map.html

正如您从中看到的那样它会显示12个位置（不确定为什么它不是13 ...），我只需要2个蓝色标记的位置。

1 个答案:

答案 0 :(得分：1)

要确定标记是否未聚类且在地图上可见，请检查：

  1. 如果标记可见
  2. 如果标记的map属性不为null
  3. 如果标记位于地图的视口内

    4. （请注意，此代码假定为markerclustererplus）

        google.maps.event.addListener(markerCluster,'clusteringend',function() {
      var side_bar_html = "";
      for (var i=0; i<gmarkers.length;i++) {
        if (gmarkers[i].getVisible() && (gmarkers[i].getMap() != null) && map.getBounds().contains(gmarkers[i].getPosition())){
          // add a line to the side_bar html
          side_bar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].getTitle() + '<\/a><br>';
        }
      }
      document.getElementById("side_bar").innerHTML = side_bar_html;
    });

    working example

    代码段 

    var geocoder = null;
var markers = [];
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
  'chco=FFFFFF,008CFF,000000&ext=.png';


function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11, //change back to 5
    center: new google.maps.LatLng(53.3077361, -1.4317984),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  geocoder = new google.maps.Geocoder();

  /* Markers within bounds */
  google.maps.event.addListener(map, 'idle', function() {


    $('.results tbody').empty();

    for (var i = 0; i < markers.length; i++) {
      if (markers[i].getVisible() && (markers[i].getMap() != null) && map.getBounds().contains(markers[i].getPosition())) {

        var stockist = markers[i].key;

        $('.results tbody').append('' +
          '<tr>' +
          '<td><span class="red">' + stockist.name + '</span><br>' + stockist.address_1 + '</td>' +
          '<td>' + stockist.postcode + '</td>' +
          '<td>xkm</td>' +
          '</tr>');
      }
    }
  });

  /* Geocode address on submit */
  document.getElementById('search-button').addEventListener('click', function() {
    geocodeAddress(geocoder, map);
  });

  var markerImage = new google.maps.MarkerImage(imageUrl,

    new google.maps.Size(24, 32));

  for (var key in data.stockists) {
    var latLng = new google.maps.LatLng(data.stockists[key].latitude, data.stockists[key].longitude);
    var marker = new google.maps.Marker({
      position: latLng,
      title: data.stockists[key].id,
      draggable: false,
      icon: markerImage,
      key: data.stockists[key]
    });

    markers.push(marker);
  }

  var zoom = zoom === -1 ? null : zoom;
  var size = size === -1 ? null : size;
  var style = style === -1 ? null : style;

  markerClusterer = new MarkerClusterer(map, markers, {
    maxZoom: 11,
    gridSize: 100
  });
}

function geocodeAddress(geocoder, resultsMap) {
  var address = document.getElementById('search-value').value;

  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {

      resultsMap.panTo(results[0].geometry.location);
      resultsMap.setZoom(12);

    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

function clearClusters(e) {
  e.preventDefault();
  e.stopPropagation();
  markerClusterer.clearMarkers();
}

google.maps.event.addDomListener(window, 'load', initialize);

var data = {
  "stockists": [{
    "id": "557",
    "retailer_id": "8162",
    "name": "Alfred Dunham & Sons Limited",
    "address_1": "56 Snape Hill Lane",
    "address_2": "Dronfield",
    "address_3": "Sheffield",
    "address_4": "",
    "postcode": "S18 2GP",
    "telephone": "01246 290205",
    "latitude": "53.3058795807",
    "longitude": "-1.46872179885"
  }, {
    "id": "643",
    "retailer_id": "5921",
    "name": "City Electrical Factors",
    "address_1": "120 Liverpool Street",
    "address_2": "Attercliffe",
    "address_3": "Sheffield",
    "address_4": "",
    "postcode": "S9 2PU",
    "telephone": "0114 2447181",
    "latitude": "53.3991836837",
    "longitude": "-1.42996239972"
  }, {
    "id": "1380",
    "retailer_id": "1047",
    "name": "Mitchells of Horley",
    "address_1": "1-9 Station Road",
    "address_2": "Horley",
    "address_3": "Surrey",
    "address_4": "",
    "postcode": "RH6 9HW",
    "telephone": "01293 820229",
    "latitude": "51.1735617204",
    "longitude": "-0.160334794573"
  }, {
    "id": "1381",
    "retailer_id": "8045",
    "name": "Lawsons Crawley",
    "address_1": "Unit 4",
    "address_2": "Telford Place",
    "address_3": "Crawley",
    "address_4": "",
    "postcode": "RH10 1SY",
    "telephone": "01293 535054",
    "latitude": "51.111860316",
    "longitude": "-0.182787540235"
  }, {
    "id": "1382",
    "retailer_id": "8163",
    "name": "Shaws Ironmongers Limited",
    "address_1": "112\/118 Duchess Road",
    "address_2": "Sheffield",
    "address_3": "South Yorkshire",
    "address_4": "",
    "postcode": "S2 4BL",
    "telephone": "01142 724289",
    "latitude": "53.3714802748",
    "longitude": "-1.46490033489"
  }, {
    "id": "1383",
    "retailer_id": "8627",
    "name": "M.K.M. Building Supplies Limited",
    "address_1": "110 Rutland Road",
    "address_2": "Sheffield",
    "address_3": "South Yorkshire",
    "address_4": "",
    "postcode": "S3 9PJ",
    "telephone": "0114 2709140",
    "latitude": "53.393997293",
    "longitude": "-1.47514511335"
  }, {
    "id": "1384",
    "retailer_id": "8628",
    "name": "M.K.M. Building Supplies Limited",
    "address_1": "201 Woodbourn Road",
    "address_2": "Sheffield",
    "address_3": "South Yorkshire",
    "address_4": "",
    "postcode": "S9 3LR",
    "telephone": "0114 2894210",
    "latitude": "53.3848381766",
    "longitude": "-1.43767094034"
  }, {
    "id": "1385",
    "retailer_id": "8173",
    "name": "Turner Hire & Sales Limited",
    "address_1": "426 - 432 London Road",
    "address_2": "Sheffield",
    "address_3": "",
    "address_4": "",
    "postcode": "S2 4ND",
    "telephone": "0114 2581682",
    "latitude": "53.364329725",
    "longitude": "-1.47400630126"
  }, {
    "id": "1386",
    "retailer_id": "5920",
    "name": "City Electrical Factors",
    "address_1": "18 Hillfoot Road",
    "address_2": "Sheffield",
    "address_3": "South Yorkshire",
    "address_4": "",
    "postcode": "S3 8AA",
    "telephone": "0114 2755680",
    "latitude": "53.3949418548",
    "longitude": "-1.48566055099"
  }, {
    "id": "1387",
    "retailer_id": "6931",
    "name": "City Electrical Factors",
    "address_1": "Unit 4 Old Forge Business Park",
    "address_2": "Sark Road",
    "address_3": "Sheffield",
    "address_4": "",
    "postcode": "S2 4HG",
    "telephone": "0114 2585555",
    "latitude": "53.3634242859",
    "longitude": "-1.47251473647"
  }, {
    "id": "1388",
    "retailer_id": "1421",
    "name": "Alltools Limited",
    "address_1": "Woodbourn House",
    "address_2": "119-139 Staniforth Road",
    "address_3": "Sheffield",
    "address_4": "",
    "postcode": "S9 3HD",
    "telephone": "0114 224 3443",
    "latitude": "53.3902025569",
    "longitude": "-1.43158582647"
  }, {
    "id": "1389",
    "retailer_id": "4471",
    "name": "Pagets Builders Merchants LTD",
    "address_1": "94 Broadfield Road",
    "address_2": "Sheffield",
    "address_3": "",
    "address_4": "",
    "postcode": "S8 0XL",
    "telephone": "0114 292 3000",
    "latitude": "53.3607476212",
    "longitude": "-1.4770556"
  }, {
    "id": "1390",
    "retailer_id": "4664",
    "name": "Arnold Laver Timber World Limited",
    "address_1": "Sheffield Central",
    "address_2": "Little London Road",
    "address_3": "Sheffield",
    "address_4": "",
    "postcode": "S8 0UH",
    "telephone": "0114 255 7341",
    "latitude": "53.3544819891",
    "longitude": "-1.48314180348"
  }, {
    "id": "1391",
    "retailer_id": "6366",
    "name": "Hardcores Building & Paving",
    "address_1": "Rawson Spring Road",
    "address_2": "Hillsborough",
    "address_3": "Sheffield",
    "address_4": "South Yorkshire",
    "postcode": "S6 1PD",
    "telephone": "01142 310909",
    "latitude": "53.4102791612",
    "longitude": "-1.49901537862"
  }, {
    "id": "1392",
    "retailer_id": "8130",
    "name": "Timber Specialists",
    "address_1": "Herries Road South",
    "address_2": "Hillsborough",
    "address_3": "Sheffield",
    "address_4": "",
    "postcode": "S6 1QS",
    "telephone": "0114 2316600",
    "latitude": "53.4111716609",
    "longitude": "-1.49750046288"
  }, {
    "id": "1393",
    "retailer_id": "8708",
    "name": "Arnold Laver Timber World Limited",
    "address_1": "Sheffield Mosborough",
    "address_2": "Olympic Sawmillsad",
    "address_3": "Oxclose Park Road North",
    "address_4": "Sheffield",
    "postcode": "S20 8GN",
    "telephone": "0114 2764800",
    "latitude": "53.3250344796",
    "longitude": "-1.34387258212"
  }, {
    "id": "1394",
    "retailer_id": "8459",
    "name": "LBS Builders Merchants Limited",
    "address_1": "Ferryboat Close",
    "address_2": "Enterprise Park",
    "address_3": "Swansea",
    "address_4": "",
    "postcode": "SA6 8QN",
    "telephone": "01792 702703",
    "latitude": "51.6569808054",
    "longitude": "-3.91979196897"
  }]
};
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<article class="stockists">
  <div class="row">
    <div class="col-md-9">
      <div class="search-form">
        <div class="row">
          <div class="col-sm-9">
            <input class="form-field" type="text" name="location" placeholder="Town, County or Postcode" id="search-value" value="SM14NG">
          </div>
          <div class="col-sm-3">
            <button class="btn btn-orange btn-upper btn-find" type="submit" id="search-button">Find Stockist</button>
          </div>
        </div>
      </div>

      <div class="map" id="map" style="width: 500px; height: 500px;"></div>

      <table class="results" width="100%">
        <thead>
          <tr>
            <th>Stockist</th>
            <th>Postcode</th>
            <th>Distance</th>
          </tr>
        </thead>

        <tbody>

        </tbody>
      </table>
    </div>
  </div>
</article>

相关问题
最新问题