Question

我目前正在 Google 地图上成功显示标记，但想为其他内容覆盖一组不同颜色的不同标记，但我有点不知道如何去做。

我将数据从数据库中获取到 $markers 数组中，如下所示：

while($row = $result->fetch_row()) 
    {
    $rows[]=$row;
    $markers[$key] = trim($row[12]).','.trim($row[13]).','.trim($row[10]).','.trim($row[9]).','.trim($row[8]).','.trim($row[4]).','.trim($row[6]).','.trim($row[3]); 
    $key = $key +1;
    }

其中 $row[""] 是来自数据库的数据，包括标记位置的纬度和经度。

魔法就在这里发生：

<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=<?=$api_key?>">
    </script>
    <script type="text/javascript">
        var map;
        var marker = {};
        function initialize() {
            var mapOptions = {
            center: { lat: 20.1788823, lng: 13.8262155},
            zoom: 2
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
        var markers = [];
        <?php 
            $counter = 0;
            foreach ($markers as $index => $list){
                   $marker_details = explode(',',$list);
                   echo 'markers["m'.($index-1).'"] = {};'."\n";
                   echo "markers['m".($index-1)."'].lat     = '".$marker_details[0]."';\n";
                   echo "markers['m".($index-1)."'].lon     = '".$marker_details[1]."';\n";
                   $counter++;
           }
        ?>
        var totalMarkers = <?=$counter?>;
        var i = 0;
        var infowindow;
        var contentString;
        for (var i = 0; i<totalMarkers; i++){
            
            contentString = '<div class="content">'+
                  '<h2 class="firstHeading">'+markers['m'+i].name+'</h2>'+
                  '<div class="bodyContent">'+
                  '<p>'+markers['m'+i].content+'</p>'+
                  '</div>'+
                  '</div>';
            
            
            infowindow = new google.maps.InfoWindow({
                  content: contentString
            });

            marker['c'+i] = new google.maps.Marker({
                    position: new google.maps.LatLng(markers['m'+i].lat,markers['m'+i].lon),

                    icon:   { 
                            url: "https://maps.google.com/mapfiles/ms/icons/red.png"
                            },
                            
                    map: map,
                    title: markers['m'+i].name,
                    infowindow: infowindow
              });
            //console.log(markers['m'+i].lat+','+markers['m'+i].lon);
            google.maps.event.addListener(marker['c'+i], 'click', function() {
                    for (var key in marker){
                        marker[key].infowindow.close();
                    }
                    this.infowindow.open(map, this);
                    
            });
        }

      }
      function panMap(la,lo){
            map.panTo(new google.maps.LatLng(la,lo));
            
      }
      function openMarker(mName){
          //console.log(marker);
          for (var key in marker){
              marker[key].infowindow.close();
          }
          for (var key in marker){
              
            if (marker[key].title.search(mName) != -1){
                marker[key].infowindow.open(map,marker[key]);
            }
          }
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

最后是这样渲染的：

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

我尝试将另一组数据中的第二组数据读取到 $markers2[$key] 中，但随后我被困在下一步该做什么上，我尝试了很多不同的事情（太多了，无法在此列出！）但它要么无法渲染新标记，要么无法在地图上渲染任何内容。

任何指向正确方向的指针都会有所帮助。不幸的是，我对 javascript 不太熟悉。

Answer 1

好的，我发现了问题，问题是我每次都在创建另一个“新”地图并且需要删除以下附加实例：

map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

现在带有新数据的附加标记可以正确显示。

感谢所有的反对票，它确实将注意力集中在自己寻找解决方案上！

如何在 Google 地图上显示多个颜色图钉

1 个答案: