私はこのフォーラムを初めて利用しており、追跡と監視の目的で現在Google Maps APIを使用しています。円の色を動的に変更したいのですが、データは現在データベースに保存されています。しかし問題は、私はすべてのサークルで同じ色(黒)を得ていることです。私はどこが間違っているのか分かりません。私を助けてください。以下はコードスニペットです。Googleマップの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];
?> \t
<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
from 'fillColor:' citymap [city] .color 'を削除してください。また、PHPとJavascriptを混在させないでください。これは読めるものではなく、良い習慣でもありません –