Question

<script type="text/javascript">
      function initMap() {
        var map;
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
          mapTypeId: 'roadmap'
        };

        // Display a map on the page
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        map.setTilt(45);

        var markers = [];
        var infoWindowContent = [];

        <?php   
        $query = "select id, dealer, lat, lon, dtype from dealer_m_testing where status = '1' and deleted is NULL"; 
        $query .= " order by seq asc";
        $dealers = mysql_query($query);
        if(mysql_num_rows($dealers) > 0){
          $i=0;
          while($dealer = mysql_fetch_array($dealers)){ ?>
            var marker = [];
            marker.push('<?php echo $dealer['id']; ?>');
            marker.push('<?php echo $dealer['dealer']; ?>');
            marker.push('<?php echo $dealer['lat']; ?>');
            marker.push('<?php echo $dealer['lon']; ?>');
            marker.push('<?php echo $dealer['dtype']; ?>');
            markers.push(marker);
            <?php
          }
        } ?>

        // Loop through our array of markers & place each one on the map  
        for( i = 0; i < markers.length; i++ ) {
          var position = new google.maps.LatLng(markers[i][2], markers[i][3], markers[i][4]);
          bounds.extend(position);
          marker = new google.maps.Marker({
            id: markers[i][0],
            position: position,
            map: map,
            title: markers[i][1],
            if (markers[i][4]=='P')
                    icon: 'https://trivenialmirah.com/img/red.png';
            else if (markers[i][4]=='R')
                    icon: 'https://trivenialmirah.com/img/blue.png';
            }
          });

          // Allow each marker to have an info window    
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                showDetails(marker.id);
            }
          })(marker, i));

          // Automatically center the map fitting all markers on the screen
          map.fitBounds(bounds);

        }

        // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
          //this.setZoom(1);
          google.maps.event.removeListener(boundsListener);
        });

      }

    </script>

Answer 1

如果您在应用程序中保存了这些图像https://trivenialmirah.com/img/red.png，那么您可以根据推送到标记数组的dtype值重命名它们。

https://trivenialmirah.com/img/P.png
https://trivenialmirah.com/img/R.png

这样你就可以做类似的事了

marker = new google.maps.Marker({
  id: markers[i][0],
  position: position,
  map: map,
  title: markers[i][1],
  icon: 'https://trivenialmirah.com/img/'+markers[i][4]+'.png';   
});

地图中的条件多个标记

1 个答案: