如何使用google map api按地址显示多个位置标记？答案

【问题标题】：How to display multiple location markers by address using google map api?如何使用google map api按地址显示多个位置标记？
【发布时间】：2015-05-18 20:44:18
【问题描述】：

我不想使用纬度和经度显示多个标记，仅通过存储在 mysql 数据库中的地址。纬度和经度不存储在表中。

我已经研究过并且成功地显示了一个标记，但是我的网络应用程序要求我根据位置显示多个标记代码如下：

<?php include_once("dbcon.php") ;
?>
<html>
<?php
$search = $_POST['search'];
$results = mysql_query("SELECT * FROM eventsTable WHERE eventLocation LIKE '%$search%'");
while ($row = mysql_fetch_assoc($results)) {
        $ename = $row["eventName"];
        $edate = $row["eventDate"];
        $edetail=$row["eventDetails"];
        $eloc = $row["eventLocation"];
        $ecity = $row["eventCity"];

        echo "<p> ".json_encode($eloc)."</p>"; echo json_encode($ecity);    }
?>

<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var geocoder;
  var map;
  var address = "<?php echo $eloc; ?>,<?php echo $ecity; ?>, PK";
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(30.51687, 69.40949);
    var myOptions = {
      zoom: 10,
      center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    if (geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
          map.setCenter(results[0].geometry.location);

            var infowindow = new google.maps.InfoWindow(
                { content: '<b>'+address+'</b>',
                  size: new google.maps.Size(150,50)
                });

            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map, 
                title:address
            }); 
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });

          } else {
            alert("No results found");
          }
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  }
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
 <div id="map_canvas" style= "right-padding=0px; width:50%; height:50%">
</body>
</html>

【问题讨论】：

拜托，stop using mysql_* functions。它们不再被维护并且是officially deprecated。改为了解 prepared statements，并考虑使用 PDO，it's not as hard as you think。
有多少“更多标记”？地理编码器将工作大约 10 次而不会达到查询/速率限制。
差不多 40-50。 ://

标签： javascript php mysql google-maps google-maps-api-3

【解决方案1】：

我不想使用纬度和经度显示多个标记，只能通过存储在 mysql 数据库中的地址。

很遗憾，Google Maps API 需要纬度/经度才能向地图添加标记。您应该考虑先使用GeoLocation API 将您的地址转换为坐标，然后您可以按传统方式添加标记。

如果这不可能，您可以使用 AJAX 在循环中检索纬度/经度（如在this answer 中），但您可能会达到本问题 cmets 中提到的速率限制。

【讨论】：

【解决方案2】：

您在 PHP 代码中只输出一个地址：

var address = "<?php echo $eloc; ?>,<?php echo $ecity; ?>, PK";

您需要创建一个地址数组并处理该数组。

Proof of issues with array of more than 11 addresses

有关处理 OVER_QUERY_LIMIT 的方法，请参阅 OVER_QUERY_LIMIT in Google Maps API v3: How do I pause/delay in Javascript to slow it down?（Andrew Leach 的回答）。

【讨论】：