如何使用谷歌地图api按地址显示多个位置标记?

时间:2015-05-18 20:44:19

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

我不想使用纬度和经度显示多个标记,只能通过存储在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>

2 个答案:

答案 0 :(得分:0)

  

我不希望使用纬度和经度显示多个标记,只显示存储在mysql数据库中的地址。

不幸的是,Google Maps API需要纬度/经度来向地图添加标记。您应该考虑先使用GeoLocation API将地址转换为坐标,然后以传统方式添加标记。

如果无法做到这一点,您可以使用AJAX在循环中检索纬度/经度(如this answer中所示),但您可能会达到此问题评论中提到的速率限制。

答案 1 :(得分:0)

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

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

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

Proof of issues with array of more than 11 addresses

请参阅OVER_QUERY_LIMIT in Google Maps API v3: How do I pause/delay in Javascript to slow it down?(Andrew Leach的答案)了解处理OVER_QUERY_LIMIT的方法。