Question

我有一个Google地图页面，该页面是通过从数据库获取信息并使用此信息放置标记来创建的。有字段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>

因此，当我单击标记时，会显示多边形，但当我单击另一个标记时它会保留在那里。

P.S。当我做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 个答案: