Как изменить цвет круга в Google Maps api динамически?

Я новичок в этом форуме и в настоящее время работает с API карт Google для отслеживания и мониторинга. Я хочу динамически менять цвет круга и данные в настоящее время хранятся в базе данных. Но проблема в том, что я получаю тот же цвет (черный) для всех кругов. Я не могу найти, где я ошибся. Пожалуйста, помогите мне. Ниже приведены фрагменты кода.Как изменить цвет круга в 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]; 
 

 

 
?> \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

источник

2016-04-04 Jahir hussain

попытаться удалить 'from fillColor:' citymap [city] .color '. И не смешивайте PHP с Javascript. Это непроницаемая, а не хорошая практика –

вы можете использовать setOptions

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

источник

2016-04-04 11:11:35 scaisEdge

вы можете установить круг Вызови цвет и цвет заливки, как это.

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

Необходимо ввести внутри события.

здесь полный код круга изменится, когда мышь закончится.

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

источник

2017-03-28 13:57:22 taymyinl

Как изменить цвет круга в Google Maps api динамически?

ответ

Смежные вопросы