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

关键词：

【中文标题】使用 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 的时间和耐心 - 再次感谢

我想使用带有谷歌地图 SDK 的 JSON 放置多个标记

】我想使用带有谷歌地图SDK的JSON放置多个标记【英文标题】：IwantplacemultiplemarkersusingJSONwithgooglemapsSDK【发布时间】：2017-04-2719:24:45【问题描述】：我正在尝试使用谷歌地图SDK添加多个标记。我获取数据但未插入多个标记，欢迎... 查看详情

如何使用javascript在谷歌地图中的多个标记之间绘制路线图

】如何使用javascript在谷歌地图中的多个标记之间绘制路线图【英文标题】：HowtodrawRoutemapbetweenmultiplemarkersingooglemapsusingjavascript【发布时间】：2018-01-0217:24:06【问题描述】：我使用谷歌地图API开发了地图。标记通过适当的标签可... 查看详情

使用Javascript在谷歌地图上的多个标记之间画线

】使用Javascript在谷歌地图上的多个标记之间画线【英文标题】：DrawLinesbetweenMultiplemarkersonGoogleMapusingJavaScript【发布时间】：2019-01-1920:30:38【问题描述】：我正在尝试在Google地图上的多个标记之间画线。多个标记的绘图是成功的... 查看详情

带有多个标记的谷歌地图自动中心

...地图地址还是动态的，所以我不能硬编码特定的坐标。我使用了之前question中的一些代码和其他代码来使用bounds来尝试从2个标记中获取坐标并 查看详情

谷歌地图 - 来自数据库经度和纬度的多个标记未显示在地图上

】谷歌地图-来自数据库经度和纬度的多个标记未显示在地图上【英文标题】：Googlemaps-Multimarkersfromdatabaselongitudeandlattitudenotshowingonthemap【发布时间】：2015-10-3015:16:06【问题描述】：我有这段代码从数据库中获取详细信息并将它们... 查看详情

如何处理谷歌地图上具有相同位置的多个标记？

...间】：2013-11-1107:37:20【问题描述】：我在一个应用程序中使用Google地图，很可能多个标记附加到同一位置，每个标记代表一个人。在这种情况下，用户不会知道这个特定标记后面还有其他标记/人。我环顾四周以处理这种情况，... 查看详情

谷歌地图上的多个标记

】谷歌地图上的多个标记【英文标题】：MultipleMarkersonaGoogleMap【发布时间】：2010-10-1100:40:34【问题描述】：我添加了一个带有两个标记的谷歌地图（我只是在测试），代码是：functionload()varmap=newGMap2(document.getElementById("map"));varmark... 查看详情

无法在谷歌地图android上动态设置多个标记

...ndroid【发布时间】：2019-11-0807:53:39【问题描述】：我正在使用推送器从另一台设备接收位置。在我的地图中，我想从推送器数据中动态显示多个标记。我尝试了多种解决方案；但没有一个有助于实现我所需要的，triedthispost这是... 查看详情

我们如何在谷歌地图中添加带有点击事件的多个标记？ [复制]

...icate]【发布时间】：2014-10-0104:37:58【问题描述】：我正在使用下面的代码，但我对点击事件有点困惑。如何，我可以在每个标记上添加点击事件吗？？varaddress=\'Dubai\';varneighborhoods=[newgoog 查看详情

谷歌地图上的多个标记

】谷歌地图上的多个标记【英文标题】：MultipleMarkersonaGoogleMap【发布时间】：2012-03-0221:21:29【问题描述】：如何在无需获取行车路线的情况下将这些经纬度值映射到maps.google.com上？我希望这些纬度/经度值是谷歌地图上的3个标记... 查看详情

无法在谷歌地图上看到多个标记

】无法在谷歌地图上看到多个标记【英文标题】：UnabletoseemultiplemarkerongoogleMap【发布时间】：2013-11-0815:43:30【问题描述】：我想在谷歌地图上显示多个标记。我的latlng坐标是从Parse数据库中获取的，但我看不到标记。我的第二个... 查看详情

如何在 javascript 谷歌地图上添加多个标记？

】如何在javascript谷歌地图上添加多个标记？【英文标题】：HowtoaddMultiplemarkersonjavascriptgooglemaps?【发布时间】：2021-07-2214:15:09【问题描述】：您好，我正在尝试在我的应用程序上添加标记，但我仍然无法在我的地图上查看标记，... 查看详情

多个标记谷歌地图嵌入API

】多个标记谷歌地图嵌入API【英文标题】：multiplemarkersgooglemapsembedAPI【发布时间】：2014-11-1605:36:42【问题描述】：我需要在嵌入地图上放置几个由坐标指定的标记。我知道如何为一个标记做，但不知道如何做多个。<iframeframebor... 查看详情

如何在谷歌地图android上设置多个标记？

】如何在谷歌地图android上设置多个标记？【英文标题】：howtosetthemultiplemarkerongooglemapandroid?【发布时间】：2020-04-2214:26:50【问题描述】：我已经完成了具有多个位置的谷歌地图标记，并且我添加了一些带有医院名称、经度和纬度... 查看详情

如何在谷歌地图的标记中添加多个位图图标？

】如何在谷歌地图的标记中添加多个位图图标？【英文标题】：HowtoaddmorethanonebitmapiconinmarkersforGoogleMaps?【发布时间】：2019-05-0523:53:33【问题描述】：IconGeneratoriconFactory=newIconGenerator(this);hM=googleMap.addMarker(newMarkerOptions().position(newLa... 查看详情

如何从谷歌地图中删除特定的多个标记而不是单个或所有标记

】如何从谷歌地图中删除特定的多个标记而不是单个或所有标记【英文标题】：Howtoremovespecificmultiplemarkerfromgooglemapinsteadofsingleorallmarker【发布时间】：2019-11-2708:02:27【问题描述】：我想从Google地图中删除多个特定标记，但我做不... 查看详情

如何在谷歌地图上添加多个标记

】如何在谷歌地图上添加多个标记【英文标题】：Howtoaddmultiplemarkersonthegooglemap【发布时间】：2021-09-1207:14:33【问题描述】：我正在尝试从从firebase读取的坐标中添加多个标记。它读取所有坐标并存储在列表中。我创建了addMarker函... 查看详情

谷歌地图多个标记映射到一个没有坐标的区域

】谷歌地图多个标记映射到一个没有坐标的区域【英文标题】：Googlemapmultiplemarkersmappedtoanareawithoutcoordinates【发布时间】：2020-04-2521:24:59【问题描述】：我的客户有一个非常奇怪的要求，我不确定它是否可以实现。这是要求：客... 查看详情