首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将标记移至AutoComplete接口预测地址?

如何将标记移至AutoComplete接口预测地址?
EN

Stack Overflow用户
提问于 2017-03-09 11:04:11
回答 1查看 1.4K关注 0票数 0

我试着这样做:

代码语言:javascript
复制
 var marker = new   google.maps.Marker({
    position: geolocation,
    animation: google.maps.Animation.BOUNCE
    });
    marker.setPosition(geolocation);

它们在代码中被注释。它什么也做不了。可能是逻辑错误或放置在错误的位置。我正在使用google autocomplete API。我已经在自动完成文档页面上修改了自动填充地址演示。which is added in hyperlink here

代码语言:javascript
复制
    <script>

      var placeSearch, autocomplete;
      var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
      };

      function initAutocomplete() {


        var mapCanvas = document.getElementById("map");
  var myCenter = new google.maps.LatLng(62,-110.0); 
  var mapOptions = {center: myCenter, zoom: 3};
  var map = new google.maps.Map(mapCanvas,mapOptions);
  var marker = new google.maps.Marker({
    position: myCenter,
    animation: google.maps.Animation.BOUNCE
  });
  google.maps.event.addListener(marker,'click',function() {
  map.setZoom(2*mapOptions.zoom);
  map.setCenter(marker.getPosition());
  });
marker.setMap(map);

         google.maps.event.addListener(map, "click", function (e) {

       //lat and lng is available in e object
        placeMarker(map, e.latLng); 
       // var latLng = e.latLng;
       // console.log("lat" + latLng.lat() + "long" + latLng.lng());
       });
         function placeMarker(map, location) {

    marker.setPosition(location);

  var infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
  });
  infowindow.open(map,marker);
}





        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
            {types: ['geocode']});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
      }

      function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
          document.getElementById(component).value = '';
          document.getElementById(component).disabled = false;
        }

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            console.log(val);
            document.getElementById(addressType).value = val;
          }
        }
      }

      // Bias the autocomplete object to the user's geographical location,
      // as supplied by the browser's 'navigator.geolocation' object.
      function geolocate() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude

            };
             console.log(geolocation.lat);
             // var marker = new google.maps.Marker({
             //  position: geolocation,
             //  animation: google.maps.Animation.BOUNCE
             //  });
             // marker.setPosition(geolocation);

            var circle = new google.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            });
            autocomplete.setBounds(circle.getBounds());
          });
        }
      }
    </script>
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42685910

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档