我是这个论坛的新手，目前正在使用 Google map 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
最佳答案
您可以像那样设置圆圈描边颜色和填充颜色。
circle.setOptions({
fillColor: '#F5F5F5',
strokeColor: '#528BE2'
});
你需要放入内部事件。
这里是完整的代码圈，当鼠标悬停时会发生变化。
google.maps.event.addListener(circle, 'mouseover', function () {
console.log('la la la');
circle.setOptions({
fillColor: '#F5F5F5',
strokeColor: '#528BE2'
});
});
关于javascript - 如何动态更改google maps api中的圆圈颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36398070/