Wie Google Map Suchfunktionalität auf meine benutzerdefinierte Schaltfläche klicken Sie in Javascript (ohne Autovervollständigung)

-1

Wie Google Map-Suchfunktionalität auf meine benutzerdefinierte Schaltfläche klicken (ohne Autovervollständigung) Suche? Ich habe bereits diesen Code ....Wie Google Map Suchfunktionalität auf meine benutzerdefinierte Schaltfläche klicken Sie in Javascript (ohne Autovervollständigung)

This example fügt mithilfe der Google Place Autocomplete-Funktion ein Suchfeld zu einer Karte hinzu.

Menschen können geografische Suchen eingeben.

Das Suchfeld gibt eine Auswahlliste mit einer Mischung aus Orten und vorhergesagten Suchbegriffen zurück.

Quelle

2017-02-25 usman tahir

Die Frage ist ein bisschen unleserlich. Können Sie die Sprache zur besseren Lesbarkeit formatieren? – Sid

Das ist meine Probe, ich den "Change" Ereignis von Textbox bin mit und "Click" Ereignis der Schaltfläche

var map; 
 
var root; 
 
var geocoder; 
 
function initialize() { 
 
    geocoder = new google.maps.Geocoder(); 
 
     geocoder.geocode({ 'address': 'Ha noi, Vietnam'}, function(results, status) { 
 
\t \t \t \t root = results[0].geometry.location; 
 
\t \t \t \t map = new google.maps.Map(document.getElementById('map'), { 
 
\t \t \t \t zoom: 18, 
 
\t \t \t \t center: root, 
 
\t \t \t \t mapTypeId: google.maps.MapTypeId.ROADMAP 
 
\t \t \t \t }); \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t var center = {latLng: root, style: 'ae', content: 'md'}; 
 

 
\t \t \t \t var zoomControlDiv = document.createElement('div'); 
 
    var zoomControl = new ZoomControl(zoomControlDiv, map); 
 

 
    zoomControlDiv.index = 1; 
 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv); 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t 
 
\t \t \t }); 
 
} 
 
function ZoomControl(controlDiv, map) { 
 
    
 
    // Creating divs & styles for custom zoom control 
 
    controlDiv.style.padding = '5px'; 
 

 
    // Set CSS for the control wrapper 
 
    var controlWrapper = document.createElement('div'); 
 

 
    controlDiv.appendChild(controlWrapper); 
 
    
 
    // Set CSS for the zoomIn 
 
    var txtAddress = document.createElement('input'); 
 
    //zoomInButton.innerHTML = '<br><img src=images/Plus.png title="Zoom In">'; 
 
    txtAddress.type="text"; 
 
    
 
    controlWrapper.appendChild(txtAddress); 
 
    
 
    var bttAddress = document.createElement('input'); 
 
    //zoomInButton.innerHTML = '<br><img src=images/Plus.png title="Zoom In">'; 
 
    bttAddress.type = "button"; 
 
    bttAddress.value= "Search"; 
 
    
 
    controlWrapper.appendChild(txtAddress); 
 
    controlWrapper.appendChild(bttAddress); 
 
    
 
    
 
    google.maps.event.addDomListener(txtAddress, 'change', function() { 
 

 
geocoder.geocode({'address': txtAddress.value}, function(results, status) { 
 
      if (status === 'OK') { 
 
      
 
      var marker = new google.maps.Marker({ 
 
       map: map, 
 
       position: results[0].geometry.location, 
 
\t \t \t title: txtAddress.value+' '+results[0].geometry.location 
 
      }); 
 
\t \t \t map.setCenter(results[0].geometry.location); 
 
\t \t \t 
 
\t \t \t 
 
      } else { 
 
      alert('Geocode was not successful for the following reason: ' + status); 
 
      } 
 
     }); 
 
    }); 
 
    
 
     google.maps.event.addDomListener(bttAddress, 'click', function() { 
 

 
geocoder.geocode({'address': txtAddress.value}, function(results, status) { 
 
      if (status === 'OK') { 
 
      
 
      var marker = new google.maps.Marker({ 
 
       map: map, 
 
       position: results[0].geometry.location, 
 
\t \t \t title: txtAddress.value+' '+results[0].geometry.location 
 
      }); 
 
\t \t \t map.setCenter(results[0].geometry.location); 
 
\t \t \t 
 
\t \t \t 
 
      } else { 
 
      alert('Geocode was not successful for the following reason: ' + status); 
 
      } 
 
     }); 
 
    }); 
 
    
 
    
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 

 
<title>Google Maps API</title> 
 

 
<style type="text/css"> 
 
#map { 
 
\t width: 100%; 
 
\t height: 600px; 
 
} 
 
</style> 
 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 
<script type="text/javascript" src="init_map.js"></script> 
 
</head> 
 
<body> 
 
\t <div id="map"> 
 
\t </div> 
 
</body> 
 
</html>

Quelle

2017-02-27 09:21:20

Wie Google Map Suchfunktionalität auf meine benutzerdefinierte Schaltfläche klicken Sie in Javascript (ohne Autovervollständigung)

Antwort

Verwandte Themen