如何在Google地图上设置不同颜色的标记？

问题描述：

我想根据从数据库中获取的类型设置不同的颜色标记。例如，类型是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); 
    ?>

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

google maps api v3 – Monds

请先询问:: http://*.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'   
}

感谢您的答案@Bhavin！但是当我得到另一种类型的FLOOD，并且我想要将标记设置为蓝色时，怎么办？ – Monds

您可以在Photoshop或任何其他工具中制作FLOOD等图像。并将该图像放在图像目录中，并将该图像的路径指定为图标参数。简单:) – Bhavin

不，不是那样的。我想要的是我设置类型，它会自动更改标记的颜色。例如，来自我的数据库的类型是FLOOD，并且我希望标记自动设置为蓝色，因为它从我的数据库中获取的类型是FLOOD。 – Monds

如何在Google地图上设置不同颜色的标记？

相关推荐