使用 PHP 的多个谷歌地图标记

Posted 2023-02-24

【中文标题】使用 PHP 的多个谷歌地图标记

【英文标题】：multiple google maps markers with PHP

【发布时间】：2014-03-16 13:42:35

【问题描述】：

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

我有一个带有邮政编码搜索功能的谷歌地图 - 邮政编码和纬度/经度存储在 mysql 数据库中。我现在需要的是一个功能，可以在地图上为特定邮政编码放置任意数量的标记 - 我希望及时扩展该功能以允许邮政编码 + 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 中使用谷歌开发者工具分析页面时，我可以看到以下内容，确认它正在获取纬度/经度，但最后有一个逗号（我认为这与它是一个数组，但不确定我如何处理它）：

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

【问题讨论】：

不确定这是否是一种粗略的做法，但我在 PHP 回显中做了以下操作： echo trim($Tlat .", " .$Tlng, ', ');这删除了逗号和我的地图显示 - 但是，我的标记没有出现并且没有错误......我认为我的 javascript 循环可能是问题？

【参考方案1】：

如果你想放置从数据库中获取的标记，你有两个问题：

PHP 代码

您只回显获取的最后一对 lat/lng：

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));
    

【讨论】：

感谢您的输入 Pedro，我已按照您的建议重新编写了代码。该函数将起作用，但是输出如下所示： 53.60081497210000, -2.27129547711000[[, ], [, ], [, ], [, ], [, ]] 如果我将 SQL 结果限制为仅显示一个 lat/ lng，结果如下所示：53.60081497210000,-2.27129547711000[]

似乎getMarkers() 首先回显了最后一个结果坐标，然后回显了$locations 数组。你能检查是否有两个echo？并且，在$locations[]赋值中，能否检查$Tlng$Tlat这两个变量是否有数据？

抱歉，Pedro 回复晚了 - 妻子正在接受化疗，这对时间造成了影响。

我已经重新编写了我的 SQL 脚本，以根据我的纬度/经度带回 5 英里半径 - 并且在测试时它可以工作。 $locations 数组现在在测试示例中如下所示：[[53.60081497210000, -2.27129547711000], [53.60081497210000, -2.27129547711000],[53.59287004000000, -2.2864131751400]。因此，看起来我们只需要剪掉正在传递的 [] ，然后在 Java 中遍历它们？如果我错了，请纠正我。再次为迟到的回复道歉。

知道了——你的代码最后还是死了，我只需要解决我在开发者控制台中错过的一些小学生错误——难以捉摸的 符号四处飘荡，忘记重命名我的地图从 mymap 到 map ...无论哪种方式，代码现在都可以完美运行 :-) 非常感谢您对这个 Pedro 的时间和耐心 - 再次感谢