从数据库中获取位置后，为每个地图图标赋予不同的颜色

Question

我的程序从数据库中获取位置并在具有相同图标颜色的地图中定位。我怎样才能为每个结果赋予不同的颜色。我的代码如下，请帮忙。

        <script type="text/javascript">
            //<![CDATA[

            var map;

            // Ban Jelacic Square - Center of Zagreb, Croatia
            var center = new google.maps.LatLng(12.906519056569701, 74.85069555664063);
             var geocoder = new google.maps.Geocoder();
             var infowindow = new google.maps.InfoWindow();
            function init() {

                var mapOptions = {
                    zoom: 10,
                    center: center,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }

                map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                makeRequest('get_location.php', function(data) {

            var data = JSON.parse(data.responseText);

            for (var i = 0; i < data.length; i++) {
                displayLocation(data[i]);
            }
        });

           }
    function displayLocation(location) {


        var content =   '<div class="infoWindow"><strong>'  + location.lat + '</strong>'
                        + '<br/>'     + location.lon
                         '</div>';

        if (parseInt(location.lat) == 0) {
            geocoder.geocode( { 'address': location.address }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {

                    var marker = new google.maps.Marker({
                        map: map, 
                        position: results[0].geometry.location,

                        title: location.name
                    });

                    google.maps.event.addListener(marker, 'click', function() {
                        infowindow.setContent(content);
                        infowindow.open(map,marker);
                    });
                }
            });
        } else {
            var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lon));
            var pinColor = "FE7569";
            var icon = {
        url: "http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png", //url
        scaledSize: new google.maps.Size(15, 15), //scaled size
        origin: new google.maps.Point(0,0), //origin
        anchor: new google.maps.Point(0, 0) //anchor
    };

            var marker = new google.maps.Marker({

                map: map, 
                position: position,
                 icon: icon,
                 title: location.name
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(content);
                infowindow.open(map,marker);
            });
        }
    }      

            function makeRequest(url, callback) {
        var request;
        if (window.XMLHttpRequest) {
            request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
        } else {
            request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
        }
        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
                callback(request);
            }
        }
        request.open("GET", url, true);
        request.send();
    }
            //]]>
            </script>
        </head>
        <body onload="init();">

            <h1></h1>

            <section id="sidebar">
                <div id="directions_panel"></div>
            </section>

            <section id="main">
                <div id="map_canvas" style="width: 70%; height: 500px;"></div>
            </section>

        </body>
    </html>

此文件从数据库中获取数据 get_location.php

    require 'config.php';

    try {

        $db = new PDO($dsn, $username, $password);
        $db->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );

        $sth = $db->query("SELECT * FROM locations");
        $locations = $sth->fetchAll();

        echo json_encode( $locations );

    } catch (Exception $e) {
        echo $e->getMessage();
    }

Answer 1

如果有效，您可以试试这个。添加一个函数getRandomColor()，我修改了你的displayLocation函数。进行这些更改，看看它是否有效。

添加此功能

function getRandomColor() {
   var letters = '0123456789ABCDEF'.split('');
   var color = '';
   for (var i = 0; i < 6; i++ ) 
   {
     color += letters[Math.round(Math.random() * 15)];
   }
   return color;
}

做评论中标记的修改

function displayLocation(location) {

 var pinColor = getRandomColor(); //add this line
 var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));  //add this line

    var content =   '<div class="infoWindow"><strong>'  + location.lat + '</strong>'
                    + '<br/>'     + location.lon
                     '</div>';

    if (parseInt(location.lat) == 0) {
        geocoder.geocode( { 'address': location.address }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {

                var marker = new google.maps.Marker({
                    map: map, 
                    position: results[0].geometry.location,
                    icon: pinImage,  //change this line
                    title: location.name
                });

                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent(content);
                    infowindow.open(map,marker);
                });
            }
        });
    } else {
        var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lon));

  //deleted some code from here

        var marker = new google.maps.Marker({

            map: map, 
            position: position,
            icon: pinImage,   //change this line
            title: location.name
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(content);
            infowindow.open(map,marker);
        });
    }
}

Answer 2

我认为你可以将 Google 地图 API 图标 Urls 放入一个数组中，然后随机选择其中之一作为你的标记：

 var map;
 var iconsArray = ["blue-dot.png", "red-dot.png", "green-dot.png", "yellow-dot.png", "purple-dot.png"];

然后在您的函数中并在您创建标记时执行以下操作：

var myUrl="";
var rand = iconsArray[Math.floor(Math.random() * iconsArray.length)];
myUrl="http://www.google.com/intl/en_us/mapfiles/ms/micons/"+iconsArray[rand];

var icon = {
    url: myUrl, //url
    scaledSize: new google.maps.Size(15, 15), //scaled size
    origin: new google.maps.Point(0,0), //origin
    anchor: new google.maps.Point(0, 0) //anchor
};

我认为应该可以解决问题！[=12=]

从数据库中获取位置后，为每个地图图标赋予不同的颜色

giving different color to each map icon after fetching the location from database

html

google-maps

colors

marker