如何在Google地圖上設置不同顏色的標記？

-4

我想根據從數據庫中獲取的類型設置不同的顏色標記。例如，類型是FIRE，我希望標記爲紅色。可能嗎？如何在Google地圖上設置不同顏色的標記？

這裏是我的maps.html

(function(){ 

      var map,marker,latlng,bounds,infowin; 
      /* initial locations for map */ 
      var _lat=14.676; 
      var _lng=121.0437; 



      function showMap(){ 
       /* set the default initial location */ 
       latlng={ lat: _lat, lng: _lng }; 

       bounds = new google.maps.LatLngBounds(); 
       infowin = new google.maps.InfoWindow(); 

       /* invoke the map */ 
       map = new google.maps.Map(document.getElementById('map'), { 
        center:latlng, 
        zoom: 10 
       }); 

       /* show the initial marker */ 
      marker = new google.maps.Marker({ 
       position:latlng, 
       map: map, 
       title: 'Hello World!' 
      }); 




       bounds.extend(marker.position); 


       /* jQuery */ 
       $.ajax({ 
        url: 'get.php', 
        data: {'ajax':true }, 
        dataType: 'json', 
        success: function(data, status){ 
         $.each(data, function(i,item){ 
          /* add a marker for each location in response data */ 
          addMarker(item.lat, item.lng, item.username); 
         }); 
        }, 
        error: function(){ 
         output.text('There was an error loading the data.'); 
        } 
       });     
      } 

      /* simple function just to add a new marker */ 
      function addMarker(lat,lng,title){ 
       marker = new google.maps.Marker({/* Cast the returned data as floats using parseFloat() */ 
        position:{ lat:parseFloat(lat), lng:parseFloat(lng) }, 
        map:map, 
        title:title 

       }); 

       google.maps.event.addListener(marker, 'click', function(event){ 
        infowin.setContent(this.title); 
        infowin.open(map,this); 
        infowin.setPosition(this.position); 
       }.bind(marker)); 

       bounds.extend(marker.position); 
       map.fitBounds(bounds); 
      } 


      document.addEventListener('DOMContentLoaded', showMap, false); 
     }()); 
    </script> 
    <style> 
     html, html body, #map{ height:100%; width:100%; padding:0; margin:0; } 
    </style> 
</head> 
<body> 
    <div id='map'></div> 

</body>

這是我get.php，我從數據庫中獲取數據。

$mysql ="SELECT lat,lng,username,type FROM `tbl_coordinates`"; 
$result = mysqli_query($connect, $mysql); 
if (!empty($result)) 
{ 

while ($row=mysqli_fetch_array($result)) 
{ 
    $latlng[] = array(
    'lat' => $row['lat'], 
    'lng' => $row['lng'], 
    'username' => $row['username'], 
    'type' => $row['type'], 



    ); 

    } 
    } 

    mysqli_close($connect); 

    header('Content-type:application/json;charset=utf-8'); 
    echo json_encode($latlng); 
    ?>

來源

2016-09-15 Monds

你哪個版本的谷歌API的工作是，顏色的？ – Bhavin

google maps api v3 – Monds

請先詢問:: http://stackoverflow.com/questions/24697284/google-api-multiple-markers-with-different-colours-depending-on-a-class/24697331# 24697331 – HoangHieu

您必須添加一個參數icon以下功能，

/* show the initial marker */ 
     marker = new google.maps.Marker({ 
      position:latlng, 
      map: map, 
      title: 'Hello World!', 
      icon: 'marker1.png' // path of your icon image. 
     });

還可以訪問此鏈接： - 從這個鏈接可以下載所有標記http://www.benjaminkeen.com/google-maps-coloured-markers/。因此，將此標記的圖像放在您的目錄中，並在icon參數中給出該圖像的路徑。這是在Google地圖中添加其他標記的最簡單方法。

編輯：

所以對於你必須把狀態的一樣，如果它的顏色是紅色，那把紅色圖標。如果洪水比洪水的圖標。

如果您在$color = 'red'獲得價值;從PHP 比在javascript把它這個樣子，

var color = <?php echo $color; ?>

然後檢查使用

if(color == 'red') 
{ 
     icon: 'red.png' 
} 
if(color == 'blue') 
{ 
     icon: 'flood.jpg'   
}

來源

2016-09-15 09:01:48 Bhavin

感謝您的答案@Bhavin！但是當我得到另一種類型的FLOOD，並且我想要將標記設置爲藍色時，怎麼辦？ – Monds

您可以在Photoshop或任何其他工具中製作FLOOD等圖像。並將該圖像放在圖像目錄中，並將該圖像的路徑指定爲圖標參數。簡單:) – Bhavin

不，不是那樣的。我想要的是我設置類型，它會自動更改標記的顏色。例如，來自我的數據庫的類型是FLOOD，並且我希望標記自動設置爲藍色，因爲它從我的數據庫中獲取的類型是FLOOD。 – Monds

如何在Google地圖上設置不同顏色的標記？

回答

相關問題