Question

当我在搜索框中输入地名时，＆＃39; s-src＆＃39;或者＆＃39; s-dest'，我得到一个位于北极海洋或北极附近的位置。

这种情况只发生在某些地方，而不是其他地方。

我从Google地图中获取地名自动填充api的建议。

var map;

function initMap(){
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: { lat: 22.8739881, lng: 81.8563971 },
    styles: mapConfig.mapStyles
});
directionsDisplay.setMap(map);

var origin_input = document.getElementById('s-src');
var destination_input = document.getElementById('s-dest');

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

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

origin_autocomplete.addListener('place_changed', function(){
    var place = origin_autocomplete.getPlace();
    if(!place.geometry){
        // statusMessage("Autocomplete's returned place contains no geometry");
        statusMessage("Please select location from suggestions. Thanks!");
        return;
    }
    expandViewportToFitPlace(map, place);
});

destination_autocomplete.addListener('place_changed', function(){
    var place = destination_autocomplete.getPlace();
    if(!place.geometry){
        // statusMessage("Autocomplete's returned place contains no geometry");
        statusMessage("Please select location from suggestions. Thanks!");
        return;
    }
    expandViewportToFitPlace(map, place);
});

var onChangeHanlder = function(){

    var origin = document.getElementById('s-src').value;
    var destination = document.getElementById('s-dest').value;

    if(origin == null || origin == "" || destination == null || destination == ""){
        statusMessage("Please Fill PickUp Location and Destination first. Thanks!")
    } else {
        calAndDisplayRoute(directionsService, directionsDisplay, origin, destination);
    }
};
// document.getElementById('s-src').addEventListener('change', onChangeHanlder);
// document.getElementById('s-dest').addEventListener('change', onChangeHanlder);
document.getElementById('s-search').addEventListener('click', onChangeHanlder);
}

function calAndDisplayRoute(directionsService, directionsDisplay, origin , destination){
var routeOptions = {
    origin: origin,
    destination: destination,
    travelMode: 'DRIVING'
};
directionsService.route(routeOptions, function(response, status){
    if(status == 'OK'){
        directionsDisplay.setDirections(response);
        map.setZoom(11);
        document.getElementsByClassName('table-container')[0].style.display="block";

    } else {
        console.log('Directions request falied due to: ' + status);
    }
});
 }

function expandViewportToFitPlace(map, place){
if (place.geometry.viewport){
    map.fitBounds(place.geometry.viewport);
} else {
    map.setCenter(place.geometry.viewport);
    map.setZoom(16);
}
}

实时样本

Map Sample

示例输入1：

资料来源：Hisar Bus Stand，Hisar，Haryana，India（显示位于北冰洋的位置，尽管位于印度）
目的地：德里（显示当前位置）
点击搜索（显示具有正确原点位置和目的地位置的正确路径）

示例输入2：

资料来源：Hisar Bus Stand，Hisar，Haryana，India（显示位于北冰洋的位置，尽管位于印度）
地图将自动加载
这里我在控制台中获得了84.17594818267227，-164.01527。变量＆＃39; map＆＃39;宣布全球化。您可以通过map.getCenter（）获取坐标.lng（）;和控制台中的map.getCenter（）。lat（）。

实际坐标为lat 29.165751，lng 75.718513。让他们在谷歌地图中正确，而不是从谷歌地图api。

想知道为什么有时会发生这种情况，而不是其他人。另外，如何解决这个问题。

Answer 1

输入＆＃34; Hisar Bus Stand，Hisar，Haryana，India＆＃34;返回一个地方对象，但没有.viewport属性。您的expandViewportToFitPlace函数中有拼写错误。

function expandViewportToFitPlace(map, place) {
  if (place.geometry.viewport) {
    map.fitBounds(place.geometry.viewport);
  } else {
    map.setCenter(place.geometry.viewport); // <-- this doesn't exist
    map.setZoom(16);
  }
}

function expandViewportToFitPlace(map, place) {
  if (place.geometry.viewport) {
    map.fitBounds(place.geometry.viewport);
  } else {
    map.setCenter(place.geometry.location);
    map.setZoom(16);
  }
}

proof of concept fiddle

代码段

＆＃13;

var map;

function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 22.8739881,
      lng: 81.8563971
    },
    // styles: mapConfig.mapStyles
  });
  directionsDisplay.setMap(map);

  var origin_input = document.getElementById('s-src');
  var destination_input = document.getElementById('s-dest');

  var origin_autocomplete = new google.maps.places.Autocomplete(origin_input);
  // origin_autocomplete.bindTo('bounds', map);

  var destination_autocomplete = new google.maps.places.Autocomplete(destination_input);
  // destination_autocomplete.bindTo('bounds', map);

  origin_autocomplete.addListener('place_changed', function() {
    var place = origin_autocomplete.getPlace();
    if (!place.geometry) {
      // statusMessage("Autocomplete's returned place contains no geometry");
      statusMessage("Please select location from suggestions. Thanks!");
      return;
    }
    expandViewportToFitPlace(map, place);
  });

  destination_autocomplete.addListener('place_changed', function() {
    var place = destination_autocomplete.getPlace();
    if (!place.geometry) {
      // statusMessage("Autocomplete's returned place contains no geometry");
      statusMessage("Please select location from suggestions. Thanks!");
      return;
    }
    expandViewportToFitPlace(map, place);
  });

  var onChangeHanlder = function() {

    var origin = document.getElementById('s-src').value;
    var destination = document.getElementById('s-dest').value;

    if (origin == null || origin == "" || destination == null || destination == "") {
      statusMessage("Please Fill PickUp Location and Destination first. Thanks!")
    } else {
      calAndDisplayRoute(directionsService, directionsDisplay, origin, destination);
    }
  };
  // document.getElementById('s-src').addEventListener('change', onChangeHanlder);
  // document.getElementById('s-dest').addEventListener('change', onChangeHanlder);
  document.getElementById('s-search').addEventListener('click', onChangeHanlder);
}

function calAndDisplayRoute(directionsService, directionsDisplay, origin, destination) {
  var routeOptions = {
    origin: origin,
    destination: destination,
    travelMode: 'DRIVING'
  };
  directionsService.route(routeOptions, function(response, status) {
    if (status == 'OK') {
      directionsDisplay.setDirections(response);
      map.setZoom(11);
      // document.getElementsByClassName('table-container')[0].style.display = "block";

    } else {
      console.log('Directions request falied due to: ' + status);
    }
  });
}

function expandViewportToFitPlace(map, place) {
  if (place.geometry.viewport) {
    map.fitBounds(place.geometry.viewport);
  } else {
    map.setCenter(place.geometry.location);
    map.setZoom(16);
  }
}
google.maps.event.addDomListener(window, "load", initMap);

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<input id="s-src" value="Hisar Bus Stand, Hisar, Haryana, India" />
<input id="s-dest" value="Delhi" />
<input id="s-search" type="button" value="search" />
<div id="map"></div>

＆＃13;

为某些搜索获取错误的MapViewport和坐标

1 个答案: