Question

我有一个简单的hello世界版本的谷歌地图api javascript v3，它适用于静态地理编码。我的数据是普通地址（即“30洛克菲勒中心，纽约，纽约”）。

这个数据是从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>

Answer 1

你好，周年纪念日快乐（关于你的问题和教程）。我是网站开发人员，一定要感谢你。我使用本教程，因为我目前无法通过提交进行地理编码（lat / long需要从存储在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>

再次感谢您发布此内容。这非常有用。

Answer 2

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

你的身体标签将如下所示;

对于Ex：

<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变量..

这对你有帮助..

Answer 3

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

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

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

然后，我的谷歌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），然后显示正确的地址

这两个问题我还需要解决，但至少地理编码工作成功。希望这有助于其他人。

谢谢！

谷歌地图API v3 - 简单，但从php / mysql添加地址的地理编码

3 个答案: