2017-04-10 8 views
0

どのようにしてユーザーの検索に時間がかかるのですか?私はこのjsfiddleを設定しています。最初の検索を除いてすべてがうまくいきます。人々が 'ニューヨーク'を検索すると地図上にマーカーが表示されます。マーカーをドラッグすると長いラットが得られますが、最初の検索からの長いラット?Googleマップの検索ボックスから長いラットを取得するAPI

https://jsfiddle.net/x1a9z5t5/

function init() { 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    center: { 
     lat: 40.730610, 
     lng: -73.935242 
    }, 
    zoom: 12 
    }); 

    var searchBox = new google.maps.places.SearchBox(document.getElementById('adress-input')); 
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('adress-input')); 


    google.maps.event.addListener(searchBox, 'places_changed', function() { 
    searchBox.set('map', null); 


    var places = searchBox.getPlaces(); 

    var bounds = new google.maps.LatLngBounds(); 
    var i, place; 
    for (i = 0; place = places[i]; i++) { 
     (function(place) { 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(40.730610, -73.935242), 
      draggable: true, 
      position: place.geometry.location 
     }); 
     marker.bindTo('map', searchBox, 'map'); 
     google.maps.event.addListener(marker, 'map_changed', function() { 
      if (!this.getMap()) { 
      this.unbindAll(); 
      } 
     }); 
     bounds.extend(place.geometry.location); 

     google.maps.event.addListener(marker, 'dragend', function(evt) { 
      document.getElementById('long-lat').innerHTML = evt.latLng.lat().toFixed(3) + " " + evt.latLng.lng().toFixed(3); 
     }); 

     }(place)); 

    } 
    map.fitBounds(bounds); 
    searchBox.set('map', map); 
    map.setZoom(Math.min(map.getZoom(), 12)); 

    }); 
} 


google.maps.event.addDomListener(window, 'load', init); 

答えて

2

取り組んであなたの必要性に応じて、このコードのコードを変更することができますドラッグされています。

私はあなたのjsfiddleにこれを追加しました:

map.addListener('bounds_changed', function(e) { 
      console.log(place.geometry.location.lat()) 

      document.getElementById('long-lat').innerHTML = place.geometry.location.lat().toFixed(3) + " " + place.geometry.location.lng().toFixed(3); 
     }); 

検索後の結果:ドラッグ後

enter image description here

結果:

enter image description here

は、この情報がお役に立てば幸いです。

-1

/あなたは /そのマーカーの後に聞きますgoogle.maps.event.addListener(marker, 'dragend'ので、たとえばmap.addListener('bounds_changed')のための新しいリスナーを作成してみてください完璧

var map; 
var marker; 


function initialize() { 

    var mapOptions = { 
     center: new google.maps.LatLng(31.7596130,74.9353020), 
     zoom: 11, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

} 

google.maps.event.addDomListener(window, 'load', initialize); 


function searchAddress() { 

    var addressInput = document.getElementById('address-input').value; 

    var geocoder = new google.maps.Geocoder(); 

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

     if (status == google.maps.GeocoderStatus.OK) { 
     console.log(google.maps); 
      var myResult=results[0].geometry.location; 
     var lat = results[0].geometry.location.lat() 
     var long = results[0].geometry.location.lng(); 
     var myResult1=results[0].formatted_address; 


     document.getElementById('geoaddress').setAttribute('value',myResult1); 
     document.getElementById('lat').setAttribute('value',lat); 
     document.getElementById('long').setAttribute('value',long); 


console.log(myResult); 
     createMarker(myResult); 

     map.setCenter(myResult); 

     map.setZoom(18); 
     } 
     else 
     { 
      alert("The Address entered by you doesnot exists"); 
      document.getElementById('geoaddress').setAttribute('value',"Invalid Address"); 
      document.getElementById('lat').setAttribute('value',"Invalid Address"); 
     document.getElementById('long').setAttribute('value',"Invalid Address"); 
     } 
    }); 

} 

function createMarker(latlng) { 

    if(marker != undefined && marker != ''){ 
    marker.setMap(null); 
    marker = ''; 
    } 


} 
関連する問題