如何同时从双击航路点和地方航路点获取坐标-Google Maps API

时间:2019-04-12 09:38:40

标签: javascript api maps

我试图以相同的方式为双击航路点和地方搜索框航路点检索纬度和经度。我确实已经从双击航路点获得了坐标,但是我也需要从航路点将坐标输出到控制台日志。我该怎么办?

我尝试将相同的方法应用于地点航路点,就像我通过双击航路点成功做到的那样

<script>

  // This example adds a search box to a map, using the Google Place Autocomplete
  // feature. People can enter geographical searches. The search box will return a
  // pick list containing a mix of places and predicted search terms.

  // This example requires the Places library. Include the libraries=places
  // parameter when you first load the API. For example:
  // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

  function initAutocomplete() {
    var location = {lat: -33.8688, lng: 151.2195};
    var map = new google.maps.Map(document.getElementById('map'), {
      center: location,
      zoom: 13,
      mapTypeId: 'roadmap'
    });

    // Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function() {
      searchBox.setBounds(map.getBounds());
    });

    var markers = [];
    var marker = [];
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function() {
      var places = searchBox.getPlaces();

      if (places.length == 0) {
        return;
      }

      // Clear out the old markers.
      markers.forEach(function(marker) {
        marker.setMap(null);
      });
      markers = [];
      // For each place, get the icon, name and location.
      var bounds = new google.maps.LatLngBounds();
      places.forEach(function(place) {
        if (!place.geometry) {
          console.log("Returned place contains no geometry");
          return;
          console.log(bounds);
        }
        /*var 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(25, 25)
        };*/

        // Create a marker for each place.
        markers.push(new google.maps.Marker({
          map: map,
          title: place.name,
          position: place.geometry.location
        }));

        if (place.geometry.viewport) {
          // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
      });
      map.fitBounds(bounds);
    });
            var marker = new google.maps.Marker({
      position: location,
      map: map,
      title: 'Hello World!'
    });
            // double click event
  google.maps.event.addListener(map, 'dblclick', function(e) {
    var positionDoubleclick = e.latLng;
    marker.setPosition(positionDoubleclick);

    markers.forEach(function(marker) {
        marker.setMap(null);
      });
      markers = [];

    /*console.log(e.pa.x);
    console.log(e.pa.y);*/

    var latitude = e.pa.y.toFixed(4);
    var longtitude = e.pa.x.toFixed(4);

    document.getElementById('latitude').value = latitude + String.fromCharCode(176) + ' S';
    document.getElementById('longtitude').value = longtitude + String.fromCharCode(176) + ' E';
  });
});
  }

</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places&callback=initAutocomplete">
</script>

´´

我希望能够将两种航路点的坐标返回到控制台。

0 个答案:

没有答案