Google Maps API v3 - 简单但从 php/mysql 添加地址的地理编码答案

【问题标题】：Google Maps API v3 - Simple but add Geocode of address from php/mysqlGoogle Maps API v3 - 简单但从 php/mysql 添加地址的地理编码
【发布时间】：2012-10-26 20:09:18
【问题描述】：

我有一个简单的 hello world 版本的 google map api javascript v3，它适用于静态地理编码。我的数据是普通地址（即“30 rockefeller center, New York, NY”）。

这个数据是从 mysql 数据库中的 php 调用的。我可以使用类似这样的方式获取页面上的地址...对于这篇文章的目的，假设这将包含所有信息：地址、城市、州、邮政编码

<?php echo $row_query_details['address'];?>

所以，我需要对地图的这些信息进行地理编码。我对 mysql 和 php 很满意，但对 javascript 却不是很满意。我已经试验/错误并研究了几天。

我到处寻找工作示例或示例，感觉这个相对简单的问题一定被问过很多次并回答过很多次，但我无法弄清楚！

提前致谢。

这是我正在使用的代码：

            <!DOCTYPE html>
            <html>
            <head>
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
            <style type="text/css">
              html { height: 100% }
              body { height: 100%; margin: 0; padding: 0 }
              #map_canvas { height: 100% }
            </style>
            <script type="text/javascript"
                src="http://maps.googleapis.com/maps/api/js?sensor=false">
            </script>
            <script type="text/javascript">
              function initialize() {
                var latlng = new google.maps.LatLng(-34.397, 150.644);
                var myOptions = {
                  zoom: 8,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
                    myOptions);
             var marker = new google.maps.Marker({
                  position: latlng,
                  title:"Hello World!"
              });

              // To add the marker to the map, call setMap();
              marker.setMap(map);  
              }

            </script>
            </head>
            <body onload="initialize()">
              <div id="map_canvas" style="width:500px; height:500px"></div>
            </body>
            </html>

【问题讨论】：

标签： php mysql api google-maps

【解决方案1】：

你好，周年快乐（关于你的问题和教程）。我是一名网络开发人员，必须感谢您。我使用了本教程，因为我目前无法通过提交进行地理编码（需要从存储在 db 中的地址中提取纬度/经度），因为我正在咨询现有网站并且对后端代码的访问最少。

要回答您关于标记交互性的问题，这需要几个简单的步骤：

1) 提供一些内容。这是在声明地理编码器（var geocoder;）之前完成的：

var contentString = 
  'line 1'+
  'line 2';

2) 在标记声明 ( var marker = new google.maps.Marker({ ) 下，您需要声明 infowindow 并添加事件监听器：

var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

编辑：

通过扩展您的方法，我已成功从 MySQL 数据库中提取数组信息。我的方法在这里：

1) 基本php如下：

include (dbinfo.php)
$result = mysql_query( 'SELECT * FROM table')
$count = 0

2) 设置谷歌地图API：

<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=yourkey&sensor=false">
</script>

3) 地理编码设置如下：

<script type="text/javascript">
var geocoder;
var map;
function initialize() {
var latlng = new google.maps.LatLng(yourlat, yourlong); //This is to center the map
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
                }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<?php  //Starts while loop so all addresses for the given information will be populated.
while($row = mysql_fetch_array($result)) //instantiates array
{ ?>            
geocoder = new google.maps.Geocoder();
var address = '<?php echo $row['address'].', '.$row['city'].', '.$row['state'].', '.$row['zip'].', '.$row['country']; ?>';
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//marker generation is done though adding the primary ID to the "marker" variable, so if address "1" has the primary ID of "1", your marker would read "marker1"
var marker<?php print $row['primaryID']; ?> = new google.maps.Marker({
map: map, 
position: results[0].geometry.location,
title: "This can be a php variable or whatever you like.  It is displayed on hover."
                    });

//var contentString manages what is seen inside of the popup            
var contentString = 
'line 1'+
'line 2';

var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker<?php print $row['primaryID']; ?>, 'click', function() {
infowindow.open(map,marker<?php print $row['primaryID']; ?>);
                    });
                  } else {
                    alert("Geocode was not successful for the following reason: " + status);
                  }
                });
                <?php
    $count++;
} //ends while
?>
              }

/*end javascript*/
</script>

再次非常感谢您发布此消息。很有用。

【讨论】：

【解决方案2】：

您可以通过在函数 initialize() 中传递 php 变量来将 PHP 变量用于 JavaScript。

您的身体标签将如下所示；

例如：

<body onload="initialize('<?php echo $row_query_details['address'];?>')">

然后您将在您的 javascript 代码中使用这个特定变量，您的 javascript 函数将如下所示：

<script type="text/javascript">
              function initialize(address) {

                var G_address = address;

                var latlng = new google.maps.LatLng(-34.397, 150.644);
                var myOptions = {
                  zoom: 8,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
                    myOptions);
             var marker = new google.maps.Marker({
                  position: latlng,
                  title:"Hello World!"
              });

              // To add the marker to the map, call setMap();
              marker.setMap(map);  
              }

            </script>

现在您可以在您的 G-MAP 代码中动态使用这个 G_address JavaScript 变量。

这会对你有所帮助..

【讨论】：

【解决方案3】：

所以，我将在这里回答我自己的问题。第一个答案提供我无法使用。我不确定答案是否不完整，或者我只是没有遵循它。无论如何，代码如下所示：

首先，我从 mysql 数据库中提取地址组件，并为它们分配变量，如下所示：

$county = $row_qry['county'];
$address = $row_qry['address'];
$city = $row_qry['city'];
$state = $row_qry['state'];

然后，我的 google v3 内容如下所示：

            <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
            <script type="text/javascript">
              var geocoder;
              var map;
              function initialize() {
                geocoder = new google.maps.Geocoder();
                var latlng = new google.maps.LatLng(34.052234,-118.243685);
                var address = '<?php echo $address.', '.$city.', '.$state; ?>';

                var myOptions = {
                  zoom: 14,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                geocoder.geocode( { 'address': address}, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map, 
                        position: results[0].geometry.location
                    });
                  } else {
                    alert("Geocode was not successful for the following reason: " + status);
                  }
                });
              }


            </script>

这样就回答了我的问题。我仍然需要解决几个问题，例如 (a) 如何使标记可点击和交互，以及 (b) 地图会在显示正确地址之前闪烁首先定义的地理编码 (34.05,-118.24) .

我仍然需要解决这两个问题，但至少地理编码工作正常。希望这对其他人有帮助。

谢谢！

【讨论】：