Question

我试着谷歌加载地图从地址获取地图为我尝试下面的代码，但它不适合我，请找出我的错误。

<html>
<head>
<script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true"></script>
  <script type="text/javascript">
      var geocoder;
      var map;
      function codeAddress() {
          geocoder = new google.maps.Geocoder();
          var lat = '';
          var lng = '';
          var city_state_zip ='390002';
          var street_address = 'vadodara';
           var address = street_address + " " + city_state_zip;
          geocoder.geocode({ 'address': address }, function (results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                  lat = results[0].geometry.location.lat(); //getting the lat
                  lng = results[0].geometry.location.lng(); //getting the lng
                  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);
              }
          });
          var latlng = new google.maps.LatLng(lat, lng);
          var myOptions = {
              zoom: 8,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          }
          map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      }


      window.onload = function () {
          codeAddress();
      }
</script>
</head>
<body>


    <div id="map_canvas" style="height: 350px; width: 500px; margin: 0.6em;">
    </div>
</body>
</html>

在那里我添加了位置手册，即'390002 vadodara'。

Answer 1

这是一个完整的解决方案，RTN_address.php函数位于下方。

这将返回在指定地址上有标记的地图。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=8" / >
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
            html, body, #map-canvas {
                height: 300px;
                width: 840px;
                margin: 0px;
                padding: 0px
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

        <script>        
            function show_map_from_sql_address(id) {
                var url_with_ID = "RTN_address.php?id=" + id.toString();
                $.ajax({
                    type : "GET",
                    url : url_with_ID,
                    data : "pid=A5843",
                    dataType : "json",
                    success : function(data) {                      
                        var geocoder = new google.maps.Geocoder();
                        var address = data.foo;
                        var map;

                        geocoder.geocode({
                            'address' : address
                        }, function(results, status) {

                            if (status == google.maps.GeocoderStatus.OK) {
                                var latitude = results[0].geometry.location.lat();
                                var longitude = results[0].geometry.location.lng();

                                var latlng = new google.maps.LatLng(latitude, longitude);
                                var mapOptions = {
                                    zoom : 10,
                                    center : latlng,
                                    mapTypeId : google.maps.MapTypeId.ROADMAP
                                };
                                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                                map.setCenter(results[0].geometry.location);
                                var marker = new google.maps.Marker({
                                    map : map,
                                    position : results[0].geometry.location
                                });
                            }
                        });
                    }
                });
            };
        </script>
    </head>
    <body onload="show_map_from_sql_address(7)">
        <div id="map-canvas"></div>
    </body>
</html>

RTN_address.php

<?php
$id = $_GET['id'];
$query1 = "SELECT * FROM table_of_homes WHERE id ='" . $id . "';";
$result1 = mysql_query($query1);
$address = "Not_set";

if (!$result1) {    
    die('Invalid query: ' . mysql_error());
} else {
    $fields = array();
    while ($row1 = mysql_fetch_array($result1, MYSQL_ASSOC)) {          
        $Street_Address = $row1['Street_Address'];
        $City_Town = $row1['City_Town'];
                $State = $row1['State']`enter code here`;
        $Zipcode = $row1['Zipcode'];                
        $address = $Street_Address ." ". $City_Town ." ". $State .", ". $Zipcode;               
    }
}
//NOTE: you can test this by entering an address here.
//$address = "111 Oak Hill Avenue Kingston PA, 18760";
echo json_encode(array('foo' => $address ));
?>

Answer 2

请参阅Google Maps API here

您要做的是发送如下的AJAX请求：

http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=vadodara+390002

这将返回您在地图上绘制的纬度和经度坐标

Google地图来自html中的地址

2 个答案: