Google Maps API 文本搜索位置

Posted 2023-02-23

【中文标题】Google Maps API 文本搜索位置

【英文标题】：Google Maps API text search location

【发布时间】：2013-02-11 04:03:35

【问题描述】：

我已经在我的屏幕上设置了一个谷歌地图，但我希望能够允许用户输入一个位置，然后将重定向到这个位置。我在以下页面上有一个示例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>

【参考方案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);
      
    );
  

【参考方案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>

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

【讨论】：

-1 用于使用 V2。 Maps API 的Version 2 已弃用，仅在 2013 年 5 月 19 日之前提供保修。你应该使用Version 3