javascript - 使用 PHP 实现多个谷歌地图标记

Question

我环顾四周，发现了一些与我类似的情况，但还没有找到解决方案。 我正在学习 PHP、Javascript，所以代码可能有点偏离，但这里是:

我有一个带有邮政编码搜索功能的 Google map - 邮政编码和纬度/经度存储在 Mysql 数据库中。我现在需要的是一个功能，可以在 map 上为特定邮政编码放置任意数量的标记 - 我希望及时扩展该功能，以允许诸如邮政编码+10英里之类的内容，具体取决于缩放级别。下面的代码将返回标记的纬度/经度，但它会在每个结果的末尾添加一个“，”，因此当我将其传递到 JavaScript 中时，它是一个无效参数 - 请确保我知道这种方式我所做的所有这些都是低效的 - 我一边做一边学习:)

PHP函数:

// get markers Function
if(!function_exists("getMarkers"))
{

//Get Markers Function
function getMarkers() 
    {
//prep the query
include ('../../secure/db_conn.php');

$currentPcode = searchPostcode($_POST['postcode']);

$tsearch = $con->prepare("SELECT t.CompanyName, p.lat, p.lng FROM Traders t, cpo_data p WHERE t.Postcode LIKE p.Postcode");
$tsearch->bindParam(1,$currentPcode, PDO::PARAM_STR);
$tsearch->execute();
$tresults = $tsearch->fetchAll(PDO::FETCH_ASSOC);

foreach ($tresults as $row) 
 {

$Company = $row['CompanyName'];
$Tlat = (string)$row['p.lat'];
$Tlng = (string)$row['p.lng'];

 }
echo $Tlat .", " .$Tlng;
    }
}

Javascript:

<script src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>

<script>

//postcode function call
var myCenter=new google.maps.LatLng(<?php echo searchPostcode($_POST['postcode']); ?>);

//markers function call
var locations=new google.maps.LatLng(<?php echo getMarkers(); ?>);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:14,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var mymap=new google.maps.Map(document.getElementById("googleMap"),mapProp);

// To add the marker to the map, use the 'map' property
var marker, i;
for (i = 0; i < locations.length; i++) 
    { 
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i]),
    map: mymap
   });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i]);
      infowindow.open(mymap, marker);
    }
  })(marker, i));
    }

}
google.maps.event.addDomListener(window, 'load', initialize);

</script>

任何帮助或建议将不胜感激 - 我目前的知识只有 PHP 和 Javascript(正如前面提到的，这是初学者的知识)。

忘记添加，当我在 Chrome 中使用谷歌开发者工具来分析页面时，我可以看到以下内容，确认它正在获取纬度/经度，但末尾有一个逗号(我认为这与它是一个数组，但不确定我如何处理它):

varlocations=new google.maps.LatLng(53.51139969260000, -2.54091408438000, );

Answer 1

如果您想放置从数据库中获取的标记，则会遇到两个问题:

PHP 代码

您仅回显获取的最后一对纬度/经度:

foreach ($tresults as $row) 
 {

   $Company = $row['CompanyName'];
   $Tlat = (string)$row['p.lat'];
   $Tlng = (string)$row['p.lng'];

 }
echo $Tlat .", " .$Tlng;

解决方案是:

$locations = array();
foreach ($tresults as $row) 
{

  $Company = $row['CompanyName'];
  $Tlat = (string)$row['p.lat'];
  $Tlng = (string)$row['p.lng'];

  $locations[] = "[" . $Tlat .", " .$Tlng . "]";
}
echo srpintf("[%s]", implode(", ", $locations);

然后在您的 JavaScript 代码中，您将坐标数组存储在 locations 中。

Javascript代码

现在在您的 JavaScript 代码中:

var locations = <?php getMarkers(); ?>

现在您的数组位置如下:

[[53.51139969260000, -2.54091408438000], [...], ...]

然后在循环中您应该以数组形式访问坐标:

var marker, i;
for (i = 0; i < locations.length; i++) 
    { 
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][0], locations[i][1]),
    map: mymap
   });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0] + ", " + locations[i][1]);
      infowindow.open(mymap, marker);
    }
  })(marker, i));
    }

}