2015-04-28 1 views
0

Я пытаюсь показать карту, когда пользователь использует параметры в Autocomplete. Мне нужно дважды выбрать местоположение для правильной карты. мой код с API v3 ... Может ли кто-нибудь увидеть в коде ниже, что я могу делать неправильно?Автозаполнение Карт Google, выбранная опция из раскрывающегося списка, не отображающего точное местоположение в первый раз

function initializeGoogleMap() { 

    //var autocomplete = new google.maps.places.Autocomplete(input); 
    //autocomplete.bindTo('bounds', map); 

    //var infowindow = new google.maps.InfoWindow(); 
    //var marker = new google.maps.Marker({ 
    // map: map, 
    // anchorPoint: new google.maps.Point(0, -29) 
    //}); 




    var mapOptions = { 
     center: new google.maps.LatLng(latitude, longitude), 
     zoom: 13, 
     styles: [{ 
      //featureType: "poi", 
      elementType: "labels", 
      stylers: [{ 
       visibility: "off" 
      }] 
     }], 
     mapTypeControl: false 
    }; 
    var map = new google.maps.Map(document.getElementById('fixturemap-canvas'), 
     mapOptions); 

    var input = /** @type {HTMLInputElement} */(
     document.getElementById('txtAddress')); 

    var types = document.getElementById('type-selector'); 
    var options = { 
     types: ['address'] 
    }; 

    var autocomplete = new google.maps.places.Autocomplete(input); 
    autocomplete.bindTo('bounds', map); 

    autocomplete.setTypes(options.types); 

    var infowindow = new google.maps.InfoWindow(); 
    var marker = new google.maps.Marker({ 
     map: map, 
     anchorPoint: new google.maps.Point(0, -29) 
    }); 

    google.maps.event.addListener(autocomplete, 'place_changed', function() { 

     infowindow.close(); 
     marker.setVisible(false); 
     var place = autocomplete.getPlace(); 
     if (!place.geometry) { 
      return; 
     } 

     // If the place has a geometry, then present it on a map. 
     if (place.geometry.viewport) { 
      map.fitBounds(place.geometry.viewport); 

      alert("came here 1 >" + place.geometry.viewport.longitude); 
     } else { 
      map.setCenter(place.geometry.location); 
      map.setZoom(17); // Why 17? Because it looks good. 
      alert("came here 2"); 
     } 
     marker.setIcon(/** @type {google.maps.Icon} */({ 
      url: place.icon, 
      size: new google.maps.Size(71, 71), 
      origin: new google.maps.Point(0, 0), 
      anchor: new google.maps.Point(17, 34), 
      scaledSize: new google.maps.Size(35, 35) 
     })); 
     marker.setPosition(place.geometry.location); 
     marker.setVisible(true); 

     var address = ''; 
     if (place.address_components) { 
      address = [ 
       (place.address_components[0] && place.address_components[0].short_name || ''), 
       (place.address_components[1] && place.address_components[1].short_name || ''), 
       (place.address_components[2] && place.address_components[2].short_name || '') 
      ].join(' '); 
     } 

     infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); 
     infowindow.open(map, marker); 
    }); 
} 
+0

Просьба представить [Минимальный, завершенный, проверенный и читаемый пример] (http://stackoverflow.com/help/mcve), который демонстрирует проблему. Включая любые необходимые HTML/CSS. – geocodezip

+1

ваш код отлично работает для меня –

+0

Для «Автозаполнения» ознакомьтесь с этой демонстрацией [здесь] (http://plnkr.co/edit/tCqIPbu1the6Nrm3Rgic?p=preview). – bjiang

ответ

0

фрагмент коды Приведенный выше работает нормально, а Dr.Molle отметил в комментариях, это привело меня к дальнейшему изучению, что есть еще одно события OnChange на тот же текстовом поле txtAddress, который перезапуск координаты.

Решение Если кто-то сталкивается с теми же вопрос, пожалуйста, проверьте свой код, чтобы узнать, есть ли OnChange событие на том же текстовом поле Переопределение данные карты.

function initializeGoogleMap() { 
.... // Code Works Fine 
} 

Check Working Code Here

PS: В моем случае я не мог бы отправил весь свой файл JS, как это было огромно! поэтому я мог опубликовать только основной фрагмент карты.

Смежные вопросы