Question

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

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

Answer 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'          
}

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

1 个答案: