Question

我正在开发一个网页，该网页必须在后台显示谷歌地图，并在页面的左半部分显示一个表格，右半部分应显示所请求的路线。请知道谷歌地图将覆盖100％的页面宽度。这是完整的查询图片：

Query description

任何想法我应该如何做到这一点？在我的视图中，应该使用LatLngBounds，将路径边界扩展到左边的某个值，但我不确定如何计算该确切的值，以便将路径放置在地图上的所需位置。

提前致谢。

Answer 1

我建议：

获取路线的边界（或在方向服务自动生成地图后获取地图视口。
将地图缩小1次（因此视口的大小是显示路线所需的两倍）
将地图置于路线边界左侧中心的中心。

proof of concept fiddle

代码段

＆＃13;

var map;

function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer({
    preserveViewport: true
  });
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 0,
    center: {
      lat: 41.85,
      lng: -87.65
    }
  });
  directionsDisplay.setMap(map);

  var onChangeHandler = function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  };
  document.getElementById('start').addEventListener('change', onChangeHandler);
  document.getElementById('end').addEventListener('change', onChangeHandler);
  calculateAndDisplayRoute(directionsService, directionsDisplay);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  directionsService.route({
    origin: document.getElementById('start').value,
    destination: document.getElementById('end').value,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {

      var bounds = response.routes[0].bounds;
      var leftSide = new google.maps.LatLng(bounds.getCenter().lat(), bounds.getSouthWest().lng());

      var marker = new google.maps.Marker({
        position: leftSide,
        map: map
      });
      console.log(leftSide.toUrlValue(6));

      google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
        map.setZoom(map.getZoom() - 1);
        map.setCenter(leftSide);
      });
      map.fitBounds(bounds);
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
#floating-panel {
  position: absolute;
  top: 25%;
  left: 10px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
  height: 50%;
  opacity: 0.5;
}

＆＃13;

<div id="floating-panel">
  <b>Start: </b>
  <input id="start" value="New York, NY" />
  <br><b>End: </b>
  <input id="end" value="Boston, MA" />
  <br>
  <input id="dirbtn" value="get directions" type="button" />
</div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>

＆＃13;

谷歌地图javascript：在半地图上显示路线

1 个答案: