在我缩放的多边形中显示标记

时间:2013-03-13 19:02:42

标签: javascript xml google-maps-api-3 google-maps-markers polygons

这是我的example.

我添加了一些代码,当页面加载时,可以只看到多边形有什么好处,但是当我使用此功能缩放到多边形时,我得到所有标记,但我的梦想是只获得多边形中的标记我缩放到所以我需要用containsLocation解决这个问题,但不知道如何。

function kmlShowPlacemark(pm) {
    if (geoXmlDoc.placemarks[pm].polygon) {
        map.fitBounds(geoXmlDoc.placemarks[pm].polygon.bounds);
        addMarker(45.374632, 14.425697,'<b>93 Feet East</b><br/>150 Brick Lane, London  E1 6RU&lt;br/&gt;7 Dec 2010 : Jenny &amp; Johnny&lt;br/&gt;');
        addMarker(45.374632, 14.425697,'<b>93 Feet East</b><br/>150 Brick Lane, London  E1 6RU&lt;br/&gt;7 Dec 2010 : Jenny &amp; Johnny&lt;br/&gt;');
        addMarker(45.348674, 14.386749,'<b>Adelphi Theatre</b><br/>The Strand, London  WC2E 7NA&lt;br/&gt;11 Oct 2010 : Love Never Dies');
        addMarker(45.35051, 14.351883,'<b>Adelphi Theatre</b><br/>The Strand, London  WC2E 7NA&lt;br/&gt;11 Oct 2010 : Love Never Dies');
        addMarker(45.319618, 14.501915,'<b>Albany, The</b><br/>240 Gt. Portland Street, London  W1W 5QU');
        addMarker(45.339893, 14.475479,'<b>Aldwych Theatre</b><br/>Aldwych, London  WC2B 4DF&lt;br/&gt;11 Oct 2010 : Dirty Dancing');
        addMarker(45.343513, 14.436684,'<b>Alexandra Palace</b><br/>Wood Green, London  N22&lt;br/&gt;30 Oct 2010 : Lynx All-Nighter');
        addMarker(45.330736, 14.434211,'<b>Stan F.La Guardia 10</b><br/>Najbolji stan na svijetu');
        addMarker(45.385431, 14.357071,'<b>sdas</b><br/>dfsada');
     } 
for (var i=0;i<geoXmlDoc.placemarks.length;i++) {
 var placemark = geoXmlDoc.placemarks[i];
 if (i == pm) {
   if (placemark.polygon) placemark.polygon.setMap(null);
   if (placemark.polyline) placemark.polyline.setMap(map);

 } else {
   if (placemark.polygon) placemark.polygon.setMap(map);
   if (placemark.polyline) placemark.polyline.setMap(null);
   }
}
}

下一个问题已部分解决。当你按下显示所有多边形(Prikažisvekvartove)时,它被称为函数showAll,它显示所有多边形,但它必须显示所有没有标记的多边形。我尝试了两种方法但它对我不起作用marker.setVisible(false);和marker.setMap(null);而且我加载基本页面top.location =“test2.php”;怎么可能更好地解决这个问题?

function showAll() {
    top.location="test2.php";
    map.fitBounds(geoXmlDoc.bounds); //show all bounds
    map.setZoom(13);
   //marker.setVisible(false);
   //marker.setMap(null); 
   for (var i=0;i<geoXmlDoc.placemarks.length;i++) {
       var placemark = geoXmlDoc.placemarks[i];
       if (placemark.polygon) placemark.polygon.setMap(map);
       if (placemark.polyline) placemark.polyline.setMap(map);
   }
 }

我试图隐藏标记,但我的方式并不好,因为在我的方式之后我再也看不到任何标记了,这是我如何做的:

function hideMarkers(){
    for(var i=0; i<hmarkers.length; i++){
        hmarkers[i].setVisible(false);
    }
}    
<?
    $query = mysql_query("SELECT * FROM poi_example");
    while ($row = mysql_fetch_array($query)){
    $name=$row['name'];
    $lat=$row['lat'];
    $lon=$row['lon'];
    $desc=$row['desc'];
    echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc');\n");
    echo 'hideMarkers();'
    }
?>

1 个答案:

答案 0 :(得分:0)

我建议在开始时将所有标记添加到地图中(但隐藏它们),在数组中保留对它们的引用。然后,当单击Polygon时,如果google.maps.geometry.poly.containsLocation为真,则处理数组测试:

function kmlShowPlacemark(pm) {
  if (geoXmlDoc.placemarks[pm].polygon) {
    map.fitBounds(geoXmlDoc.placemarks[pm].polygon.bounds);
    for (var i=0;i<gmarkers.length;i++) {
      if (google.maps.geometry.poly.containsLocation(gmarkers[i].getPosition(),geoXmlDoc.placemarks[pm].polygon)) {
         gmarkers[i].setMap(map);
      } else {
         gmarkers[i].setMap(null);
      }
    }
  } 

   for (var i=0;i<geoXmlDoc.placemarks.length;i++) {
     var placemark = geoXmlDoc.placemarks[i];
     if (i == pm) {
       if (placemark.polygon) placemark.polygon.setMap(null);
       if (placemark.polyline) placemark.polyline.setMap(map);

     } else {
       if (placemark.polygon) placemark.polygon.setMap(map);
       if (placemark.polyline) placemark.polyline.setMap(null);
       }
   }
}

(注意:下面的示例不会隐藏要开始的标记,因为我想知道它们在哪里,单击多边形会隐藏多边形外的所有标记并再次显示其中的标记) working example

要在首次添加时隐藏标记,请从addMarker函数中删除“map”选项:

function addMarker(lat, lng, info) {
    var pt = new google.maps.LatLng(lat, lng);
    bounds.extend(pt);

    var marker = new google.maps.Marker({
        position: pt,
        icon: icon
    });
// rest of the code stays the same.