2016-04-04 14 views
0

Ich bin neu in diesem Forum und arbeite derzeit mit Google Maps API für Tracking und Überwachung. Ich möchte die Farbe des Kreises dynamisch ändern und die Daten werden derzeit in einer Datenbank gespeichert. Aber das Problem ist, dass ich die gleiche Farbe (schwarz) für alle Kreise bekomme. Ich kann nicht finden, wo ich falsch gelaufen bin. Bitte hilf mir. Im Folgenden finden Sie die Code-Snippets.Wie ändert man die Kreisfarbe in Google Maps API dynamisch?

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

Dies ist meine Seite: http://mybbb.esy.es/xmltest.php

ansehen, so dass Sie finden können, wo das Problem existiert.

Die Farbwerte werden wie diese in einer Datenbanktabelle gespeichert: # B22122

+0

versuchen, die 'von fillColor:' citymap [city] .color 'zu entfernen. Und mischen Sie nicht PHP mit Javascript. Dies ist unlesbar und keine gute Übung –

Antwort

0

Sie setOptions

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

Sie Kreis stoke Farbe verwenden können und Füllfarbe so einstellen können.

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

Sie müssen ins Ereignis setzen.

Hier wird der vollständige Code-Kreis geändert, wenn die Maus vorbei ist.

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