使用PHP foreach循环的JavaScript中的MySQL数据（Google Maps API）

问题描述：

I'm trying to use the Google Maps V3 API to create markers on a google map. I have the coordinates of the markers in mySQL database, and is currently in a PHP array in my .php file. Now how do I use a foreach() loop (or another suitable method) to loop through the elements in my PHP array and create a new google map marker with each iteration of the loop?

PS: My PHP is decent, but not my javscript knowledge. The tutorial I'm following now on creating the markers is at http://www.svennerberg.com/2009/07/google-maps-api-3-markers/

Code

I'm using Codeigniter framework, so the controller+model file already retrieved the necessary data(name, lng, lat...) into an array $map. I can loop the array using the usual method:

foreach($map as $row) {
    $lng = $row[lng]  // this is not necessary, its just to show what is in the array
    $lat = $row[lat]
    // now how do I use this loop to create new marker code in javascript?
}

The JS code for creating a google map marker which has to be created once per foreach loop iteration is like:

var map = new google.maps.Map(document.getElementById('map'), {  
zoom: 7,  
  center: new google.maps.LatLng($lng, $lat),    // how do i pass the PHP variables into the JS code?  
  mapTypeId: google.maps.MapTypeId.ROADMAP  
});

So my question is how do i pass the PHP variables in the PHP array to create the JS code above, once per each foreach() loop iteration?

我正在尝试使用Google Maps V3 API在Google地图上创建标记。我在mySQL数据库中有标记的坐标，目前在我的.php文件中的PHP数组中。现在，我如何使用foreach（）循环（或其他合适的方法）循环遍历PHP数组中的元素，并在循环的每次迭代中创建一个新的谷歌地图标记？ p>

PS：我的PHP很不错，但不是我的javscript知识。我现在关注的创建标记的教程是 http ：//www.svennerberg.com/2009/07/google-maps-api-3-markers/ p>

代码强> p>

我正在使用Codeigniter框架，因此控制器+模型文件已经将必要的数据（name，lng，lat ...）检索到数组$ map中。我可以使用通常的方法循环数组： p>

  foreach（$ map as $ row）{
 $ lng = $ row [lng] //这不是必需的， 它只是为了展示数组中的内容
 $ lat = $ row [lat] 
 //现在我如何使用这个循环在javascript中创建新的标记代码？
} 
  code>  pre  > 
 
 用于创建谷歌地图标记的JS代码，每个foreach循环迭代必须创建一次，如： p> 
 
 
  var map = new google。  maps.Map（document.getElementById（'map'），{
zoom：7，
 center：new google.maps.LatLng（$ lng，$ lat），//我如何将PHP变量传递给JS代码 ？
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}）; 
  code>  pre> 
 
 所以我的问题是如何将PHP数组中的PHP变量传递给 创建上面的JS代码，每个foreach（）循环迭代一次？ p> 
  div>

答

First of all, you are on the right track, but you just need to understand the separate concepts of server-side and client-side languages and how they can interact. PHP doesn't "pass" variables to JavaScript, but what it does do is generate whatever HTML document you want.

That HTML document then can contain JavaScript, which will execute as the page is rendered by the browser. So, think of your PHP as making the JavaScript code:

Example of PHP outputting JavaScript code in HTML page:

<script type="text/javascript">
     var testval = "<?php echo "Hello, " . (5 + 3) . "!" ?>";  // "Hello, 8!
</script>

Now, I looked up the tutorial, and actually the code in your question is not the right code — instead it is the code to create the map, and the lat/long parameters in your example are for the center, not a marker.

So, in your PHP page, you want to do the following:

Somewhere, you need to create the map: var map = new google.maps.Map... (as shown in the tutorial)
Next, get the $map array with array items containing the 'lng' and 'lat' keys. (Note: you should always wrap array key names with quotes)
Inside an opened script tag use <?php to create a PHP code block, and create your foreach loop. For each item, create the JavaScript code needed to create the marker.

Example of foreach loop:

<script type="text/javascript">
<?php
foreach($map as $row) {
    $lng = $row['lng'];
    $lat = $row['lat'];
    ?>
    // Creating a marker and positioning it on the map  
    new google.maps.Marker({  
        position: new google.maps.LatLng(<?php echo $lat ?>, <?php echo $lng; ?>),  
        map: map  
    }); 
    <?php
}
?>
</script>

答

Usually the approach here is to encode the PHP data as JSON and then echo it into a Javascript variable:

<script type="text/javascript">
var myData = <?php echo json_encode($map); ?>;
</script>

which will output a Javascript literal you can use in your client-side scripting.

答

You'll want to loop this:

var marker;

<?php foreach($map as $row){ ?>
  marker = new google.maps.Marker({  
  position: new google.maps.LatLng(<?php echo $row['lat'].','.$row['long']; ?>),  
  map: map  
});
<?php } ?>

Just after the other code you included (which is to setup the map initially).

答

As @nrabinowitz said you can add the code in a ajax request

If your javascript is in the same page being loaded, you can add it in the same page.

<?php $c = 0;// counter ?>
<?php foreach ($map as $row):?>
var marker<?php echo $c?> = new google.maps.Marker({
     position: new google.maps.LatLng(<?php echo $row['lat'].','.$row['long']; ?>),     map: map   });
<?php $c++; ?>
<?php endforeach;?>

THis way you wont overwrite the variable

答

example to loop in JavaScript is as follows-

<script type="text/javascript">
"<?php echo $arr=array('1'=>'1','2'=>'2','3'=>'3','4'=>'4','5'=>'5'); 
foreach($arr as $k => $v){ ?>"
var x='<?php echo $v; ?>';
alert(x);
"<?php } ?>"
</script> 

Replace $arr with your array and apply google map code in the script.

使用PHP foreach循环的JavaScript中的MySQL数据（Google Maps API）

相关推荐