Google Maps API 文本搜索位置

Question

我已经在我的屏幕上设置了一个谷歌地图，但我希望能够允许用户输入一个位置，然后将重定向到这个位置。我在以下页面上有一个示例https://developers.google.com/maps/location-based-apps 在第一张地图中，您可以在其中输入位置。我目前拥有的代码是这个，但我找不到有关如何输入文本框以允许使用新位置刷新地图的信息。

<script type="text/javascript">

    //Javascript used to add Elements to the maps
    // Arguments latitude, longitude, name
    function addMarkersToMap(eventTitle,eventLongitude,eventLatitude)
    {
        markers.push({ lat: eventLatitude, lng: eventLongitude, name: eventTitle });
    }

    function initialize() 
    {
        // Create the map
        var lat, lon, myOptions;
        if(navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(function(position)
            {           
                lat = <%= @event.latitude %>;
                lon = <%= @event.longitude %>;
                myOptions = 
                {
                    center: new google.maps.LatLng(lat, lon),
                    zoom: 12,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                // Create the markers ad infowindows.
                for (index in markers) addMarker(markers[index]);
                function addMarker(data) 
                {
                    // Create the marker
                    var marker = new google.maps.Marker(
                    {
                        position: new google.maps.LatLng(data.lat, data.lng),
                        map: map,
                        title: data.name
                    });

                    // Create the infowindow with two DIV placeholders
                    // One for a text string, the other for the StreetView panorama.
                    var content = document.createElement("DIV");
                    var title = document.createElement("DIV");
                    title.innerHTML = data.name;
                    content.appendChild(title);
                    var streetview = document.createElement("DIV");
                    streetview.style.width = "200px";
                    streetview.style.height = "200px";
                    content.appendChild(streetview);
                    var infowindow = new google.maps.InfoWindow(
                    {
                        content: content
                    });

                    // Open the infowindow on marker click
                    google.maps.event.addListener(marker, "click", function() 
                    {
                        infowindow.open(map, marker);
                    });

                    // Handle the DOM ready event to create the StreetView panorama
                    // as it can only be created once the DIV inside the infowindow is loaded in the DOM.
                    google.maps.event.addListenerOnce(infowindow, "domready", function() 
                    {
                        var panorama = new google.maps.StreetViewPanorama(streetview, 
                        {
                            navigationControl: false,
                            enableCloseButton: false,
                            addressControl: false,
                            linksControl: false,
                            visible: true,
                            position: marker.getPosition()
                        });
                    });
                }
            },
            function(error)
            {
                alert('Error: An error occur while fetching information from the Google API');
            });
        }
        else 
        {
            alert("Your browser doesn't support geolocations, please consider downloading Google Chrome");
        }
    }

</script>

<div id="map_canvas" style="width:100%; height:400px"></div>

Answer 1

您要查找的是Geocoding 而不是地理位置。

函数findLocation()below 使用地理编码从文本框address 中查找位置。它在接受的答案中使用 API 的 Version 3，而不是 V2。 Maps API 的Version 2 已弃用，仅在 2013 年 5 月 19 日之前提供保修，不应在新应用程序中使用。

function findLocation() {
    var address = document.getElementById('address').value;
    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('Location not found: ' + status);
      }
    });
  }

Answer 2

你可以这样试试……

<html>
<head>
    <title>Google Maps API Example: Simple Geocoding</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw"
  type="text/javascript"></script>
<script type="text/javascript">

var map = null;
var geocoder = null;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(17.445824,78.377395), 1);
    map.setUIToDefault();
    geocoder = new GClientGeocoder();
  }
}

function showAddress(address) {
  if (geocoder) {
    geocoder.getLatLng(
      address,
      function(point) {
        if (!point) {
          alert(address + " not found");
        } else {
          map.setCenter(point, 15);
          var marker = new GMarker(point, {draggable: true});
          map.addOverlay(marker);
          GEvent.addListener(marker, "dragend", function() {
            marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
          });
          GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
          });
      GEvent.trigger(marker, "click");
        }
      }
    );
 }
}
</script>
</head>

<body onload="initialize()" onunload="GUnload()">
<form action="#" onsubmit="showAddress(this.address.value); return false">

  <p>
    <input type="text" style="width:350px" name="address" value="hitech city,         Hyderabad"/>
    <input type="submit" value="Search" />
  </p>
  <div id="map_canvas" style="width: 600px; height: 400px"></div>
</form>

</body>
</html>

进行相应的更改..///