2016-04-04 18 views
0

私はこのフォーラムを初めて利用しており、追跡と監視の目的で現在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

+0

from 'fillColor:' citymap [city] .color 'を削除してください。また、PHPとJavascriptを混在させないでください。これは読めるものではなく、良い習慣でもありません –

答えて

0

あなたは円ストロークの色を設定し、そのように色を埋めることができますはsetOptions

cityCircle.setOption(strokeColor: '#00FF00'); 
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' 
        }); 
       }); 
関連する問題