Question

我是此论坛的新用户，目前正在使用Google Maps API进行跟踪和监控。我想动态更改圆的颜色，数据当前存储在数据库中。但问题是我得到了所有圆圈的相同颜色（黑色）。我找不到我错的地方。请帮我。以下是代码段。

<?php

$latvalue = array();
$longvalue = array();
$population= array();
$color= array();

$servername = "localhost";
$username = "test";
$password = "xxxxxx";
$dbname = "test_db";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT * FROM mytable";
$result = mysqli_query($conn, $sql);

$number =mysqli_num_rows($result);
$index = 0;

if (mysqli_num_rows($result) > 0) {
    while($row = mysqli_fetch_assoc($result)) {
        $yourArray[$index] = $row;
   // echo "id: " . $row["id"]. " - lat: " . $row["latitude"]. "- log:  " . $row["longitude"]. "<br>";
     $index++;
    }
} 

else {
    echo "0 results";
}


mysqli_close($conn);

for($x=0;$x<$number;$x++)
{

$latvalue[$x] = $yourArray[$x]['latitude'];

$longvalue[$x] = $yourArray[$x]['longitude'];

$population[$x] = $yourArray[$x]['size'];

$color[$x] = $yourArray[$x]['color'];

}

//echo $latvalue[0];


?>	




<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Circles</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
            // This example creates circles on the map, representing populations in North
      // America.

      // First, create an object containing LatLng and population for each city.
naming = new Array();

<?php

$test_str =  "var citymap = {";

for($i = 0; $i < $number; $i++){

$test_str .=  $i+1 . ": {center: {lat:" .$latvalue[$i]. ",lng:" . $longvalue[$i] . "}, population: " . $population[$i] . ", color: '". $color[$i]  ."'},";

}

$test_str .= "};" ;

echo $test_str;
?>



      function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: {lat: 11.0773756, lng: 76.98866040000007},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

        // Construct the circle for each value in citymap.
        // Note: We scale the area of the circle based on the population.
        for (var city in citymap) {
          // Add the circle for this city to the map.
          var cityCircle = new google.maps.Circle({
            strokeColor: '#FFFFFF',
            strokeOpacity: 0.8,
            strokeWeight: 3,
            fillColor: 'citymap[city].color',
            fillOpacity: 0.7,
            map: map,
            center: citymap[city].center,
            radius: Math.sqrt(citymap[city].population) * 1
          });
        }
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZMU3v1pUYZuf8Bbiv6YQi5N3IY7pTQxc&callback=initMap">
    </script>
  </body>
</html>

这是我的页面：http://mybbb.esy.es/xmltest.php

查看此信息，以便找到问题所在。

颜色值存储在数据库表中：＃B22122

Answer 1

你可以设置圆圈颜色并填充颜色。

circle.setOptions({
                        fillColor: '#F5F5F5',
                        strokeColor: '#528BE2'
                    });

你需要把内部活动。

这里是完整的代码圈，当鼠标结束时会改变。

google.maps.event.addListener(circle, 'mouseover', function () {
                    console.log('la la la');
                    circle.setOptions({
                        fillColor: '#F5F5F5',
                        strokeColor: '#528BE2'
                    });
                });

Answer 2

您可以使用setOptions

cityCircle.setOption( strokeColor: '#00FF00');

如何动态更改google maps api中的圆圈颜色？

2 个答案: