如何在谷歌地图上设置不同颜色的标记？答案

【问题标题】：How to set different color of markers on google maps?如何在谷歌地图上设置不同颜色的标记？
【发布时间】：2017-01-23 05:31:26
【问题描述】：

我想根据从我的数据库中获取的类型设置不同的颜色标记。例如类型是火，我希望标记为红色。可能吗？

这是我的 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);
   ?>

【问题讨论】：

你在使用哪个版本的google api？
谷歌地图 api v3
提问前请先搜索::stackoverflow.com/questions/24697284/…
How can I modify the markers?的可能重复

标签： php google-maps google-maps-api-3

【解决方案1】：

你必须在下面的函数中再添加一个参数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 参数中给出该图像的路径。这是在谷歌地图中添加其他标记的最简单方法。

编辑：

因此，您必须设置条件，如果它的颜色是红色，然后放置红色图标。如果洪水比洪水的图标。

如果你在$color = 'red' 中获得了价值；来自 php 比在javascript中这样写，

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

然后使用颜色检查，

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

【讨论】：

感谢@Bhavin 的回答！但是当我得到另一种类型（如 FLOOD）并且我希望将标记设置为蓝色时呢？
您可以在photoshop或任何其他工具中制作洪水等图像。并将该图像放在图像目录中，并将该图像的路径提供给图标参数。简单:)
不，不是那样的。我想要的是设置类型并自动更改标记的颜色。例如，来自我的数据库的类型是 FLOOD，我希望标记自动设置为蓝色，因为它从我的数据库中获取的 TYPE 是 FLOOD。
你能帮我创造一个这样的条件吗？谢谢。
兄弟我要把你的代码放在哪里？你能试试把它放在我发布的代码上吗？