Google地圖：點擊標記時切換KML

Question

我有一個Google Maps頁面，它是通過從數據庫中獲取信息並使用此信息來放置標記而創建的。 有字段kml，其中包含指向kml文件的鏈接。

單擊相應的標記時，我想將此kml顯示為多邊形。

因此，每個標記都有其自己的kml。

單擊標記時，我已經可以顯示多邊形，但是我需要它們進行切換，以便單擊一個標記時，它顯示為kml，但是單擊另一個標記時，它必須刪除先前的多邊形，並顯示新的多邊形。。

基本上，標記的信息窗口也會發生這種情況。

更新：

我使用以下代碼：

<?php
  // require("connect db");

  $queryLocations = "
    SELECT l.name, l.gpslat, l.gpslong, l.kml, l.id, GROUP_CONCAT(DISTINCT c.model ORDER BY c.model ASC SEPARATOR '</br>') AS cars, COUNT(c.model) AS count
    FROM locations AS l
    JOIN cars AS c
    ON l.invers_id = c.location_id
    WHERE l.status = 'Activa'
    AND l.city = 91
    AND l.name like '%/ Zona%'
    GROUP BY l.name
  ";
  $locations = $db->query($queryLocations);
  $rowLocations = $locations->fetchAll(PDO::FETCH_ASSOC);
?>

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
      .cars { margin-top: 5px; }
      .details { margin-top: 5px; }
    </style>

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIbL_AXIspL0t6trcEBQPEXzhK9NTGS7k">
    </script>

    <script type="text/javascript">
      var infowindow = new google.maps.InfoWindow();

      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(40.430013, -3.695854),
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

        var location = <?php echo json_encode($rowLocations);?>;

        function displayLocation(location) {
          var kmlArray = [];
          var index = kmlArray.length;
          var addMarker = function(position, title, kml) {
            var marker = new google.maps.Marker({
              map: map, 
              position: position,
              title: title,
              index: index,
            });

            var ctaLayer = new google.maps.KmlLayer({
              url: kml,
              preserveViewport: true,
              suppressInfoWindows: true
            });

            kmlArray.push(ctaLayer);

            google.maps.event.addListener(marker, 'click', function() {
              var clickedindex = marker.get('index');
              console.log('clicked marker ',clickedindex);

              kmlArray.forEach(function(kml) {
                kml.setMap(null);
              });

              kmlArray[clickedindex].setMap(map);

              infowindow.setContent(location.name + marker.index + location.id);
              infowindow.open(map,marker);
            });
          };

          addMarker({lat:parseFloat(location.gpslat), lng:parseFloat(location.gpslong)},location.name,'http://equipo.bluemove.es/mapas/' + location.kml);
        }
        for (var i = 0; i < location.length; i++) {
            displayLocation(location[i]);
          }
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>

  <body>
    <div id="map-canvas"></div>
  </body>

</html>

因此，當我單擊標記時，將顯示多邊形，但是當我單擊另一個標記時，多邊形將停留在該位置。

PS當我echo $json_encode($rowLocations); 我得到這樣的東西：

[ { name: 'Barrio Centro / Zona 92 Arg?elles Sur (Entre Buen Suceso, Plaza de Espa?a y Cuesta de San Vicente (Situado en la calle)',
    gpslat: '40.42631149292',
    gpslong: '-3.7155029773712',
    kml: '92_Arguelles_Sur.kml',
    id: '97',
    cars: 'KIA Rio 5p Plata</br>KIA Rio 5p Rojo',
    count: '2' },
  { name: 'Barrio Chamart?n / Zona 55 Nueva Espa?a (Entre Alberto Alcocer y Mateo Inurria (Situado en la calle)',
    gpslat: '40.463249206543',
    gpslong: '-3.68239402771',
    kml: '55_Nueva_Espana.kml',
    id: '84',
    cars: 'KIA Rio 5p Blanco</br>KIA Rio 5p Rojo',
    count: '3' },
  { name: 'Barrio Chamber? / Zona 76 Vallehermoso_Este (Entre Guzm?n el Bueno y Bravo Murillo (Situado en la calle)',
    gpslat: '40.443111419678',
    gpslong: '-3.707820892334',
    kml: '76_Vallehermoso_Este.kml',
    id: '89',
    cars: 'KIA Rio 5p Blanco',
    count: '1' },
  { name: 'Barrio Chamberi / Zona 71 Gaztambide (Entre Blasco de Garay e Isaac Peral y Pricesa (Situado en la calle)',
    gpslat: '40.435173034668',
    gpslong: '-3.7147951126099',
    kml: '72_GAZTAMBIDE.kml',
    id: '85',
    cars: 'KIA Rio 5p Blanco',
    count: '1' },
  { name: 'Barrio Chamberi / Zona 72 Arapiles (Entre Blasco de Garay, Bravo Murillo y San Bernardo (Situado en la calle)',
    gpslat: '40.434795379639',
    gpslong: '-3.7082290649414',
    kml: '72_Arapiles.kml',
    id: '92',
    cars: 'KIA Rio 5p Blanco</br>KIA Rio 5p Rojo',
    count: '3' },
  { name: 'Barrio Chamberi / Zona 74 Almagro (Entre Santa Engracia y Paseo de la Castellana (Situado en la calle)',
    gpslat: '40.431015014648',
    gpslong: '-3.6925220489502',
    kml: '74_Almagro.kml',
    id: '70',
    cars: 'KIA Rio 5p Blanco</br>KIA Rio 5p Marron</br>KIA Rio 5p Rojo',
    count: '6' },
  { name: 'Barrio Chamberi / Zona 75 Rios Rosas (Entre Raimundo Fernandez Villaverde y Jos? Abascal (Situado en la calle)',
    gpslat: '40.442276000977',
    gpslong: '-3.6977150440216',
    kml: '75_RIOS_ROSAS.kml',
    id: '86',
    cars: 'KIA Rio 5p Blanco</br>KIA Rio 5p Plata</br>KIA Rio 5p Rojo',
    count: '3' },
  { name: 'Barrio Hispanoamerica / Zona 54 Este (Entre Principe de Vergara y Avenida de la Paz (Situado en la calle)',
    gpslat: '40.455364227295',
    gpslong: '-3.6698839664459',
    kml: '54_Hispanoamerica_Este.kml',
    id: '83',
    cars: 'KIA Rio 5p Blanco 1</br>KIA Rio 5p Blanco 2</br>KIA Rio 5p Rojo',
    count: '3' },
  { name: 'Barrio Hispanoamerica / Zona 54 Oeste (Entre Alberto Alcocer y Concha Espina (Situado en la calle)',
    gpslat: '40.455436706543',
    gpslong: '-3.6824150085449',
    kml: '54_Hispanoamerica_Oeste.kml',
    id: '75',
    cars: 'KIA Rio 5p Blanco',
    count: '1' },
  { name: 'Barrio Salamanca / Zona 41 Recoletos (Entre Alcal?, O?Donnell y Don Ram?n de la Cruz (Situado en la calle)',
    gpslat: '40.425373077393',
    gpslong: '-3.6854410171509',
    kml: '41_Recoletos.kml',
    id: '91',
    cars: 'KIA Rio 5p Rojo',
    count: '1' },
  { name: 'Barrio Salamanca / Zona 46 Castellana (Entre Maria Molina y Don Ramon de la Cruz (Situado en la calle)',
    gpslat: '40.432849884033',
    gpslong: '-3.6840240955353',
    kml: '46_Castellana.kml',
    id: '73',
    cars: 'KIA Rio 5p Blanco',
    count: '2' },
  { name: 'Barrio Tetuan / Zona 62 Cuatro Caminos (Entre Raimundo Fernandez Villaverde y General Yag?e (Situado en la calle)',
    gpslat: '40.45157623291',
    gpslong: '-3.6967279911041',
    kml: '62_Cuatro_Caminos.kml',
    id: '79',
    cars: 'KIA Rio 5p Blanco',
    count: '2' } ]

您可以在http://188.226.231.156/~burdiyan/mapa/concatenated.php上查看其工作方式

請檢查此頁面，了解我希望它如何工作： https : //www.zebramobil.de/單擊“開始演示”

謝謝！

Answer 1

您需要跟蹤添加的每個kml圖層，以便以后進行切換。 在這種情況下，我建議您聲明一個數組，以便稍后在打開活動的kml之前，依次關閉每個kml進行遍歷。

為了方便起見，我制作了一個函數來封裝此行為

// I declare an array called kmlArray to store a reference to my kml layers
var kmlArray=[];

// I declare a function that expects a position, a title and a kml url
var addMarker=function(position, title, kml) {

    // i'll give each marker an index property equal to the elements in kmlArrays
    var index=kmlArray.length;
    var marker = new google.maps.Marker({
                map: map, 
                position: position,
                title: title,
                index:index
              });

    var ctaLayer = new google.maps.KmlLayer({
                  url: kml, 
                  preserveViewport: true,
                  suppressInfoWindows: true
                });

    // I add the kml layer I just created to my kmlArray.
    kmlArray.push(ctaLayer);


    // I add the behavior to the click event on the marker I'm adding
    google.maps.event.addListener(marker,'click',function() {
        // I retrieve the index property I gave the marker.  
        var clickedindex=marker.get('index');
        console.log('clicked marker ',clickedindex);

        // I loop through all my kml layers turning them off
        kmlArray.forEach(function(kml) {
            kml.setMap(null);
        });

        // I turn on the kml element whose index corresponds to the marker I just clicked
        kmlArray[clickedindex].setMap(map);
    });
};

我為您提供了4個德克薩斯州縣的示例。 看到它正常工作： http : //bl.ocks.org/amenadiel/b0bc74a37e8438c63d43

Google地圖：點擊標記時切換KML

問題描述

1 個解決方案

解決方案1
0 已采納 2014-08-22 20:26:10

Google地圖：點擊標記時切換KML

問題描述

1 個解決方案

解決方案1 0 已采納 2014-08-22 20:26:10

解決方案1
0 已采納 2014-08-22 20:26:10