Question

这是我的代码它可以工作，但它总是显示一个不同的位置，这意味着我的中心已经写好了，但它是我的中心，我希望你可以提供帮助。我做的这个代码有路线方向或旅行模式，但我的路线不会显示为一个整体。位置大多不同，大部分时间错误的位置和我的Zoom也不起作用。

$i

Answer 1

为所有DirectionsRenderers将DirectionsRendererOptions preserveViewport属性设置为true。这将阻止每个DirectionsRenderer设置地图中心并在将其添加到地图时进行缩放。由于DirectionsService是异步的，因此会随机设置地图以显示一个结果，从而覆盖初始中心和缩放属性。

directionsDisplay.setOptions({
  suppressMarkers: true,
  preserveViewport: true
});

计算所有这些请求的返回边界的并集。

  if (!bounds) bounds = response.routes[0].bounds;
  else bounds.union(response.routes[0].bounds);

使用它来设置地图可见边界。

  map.fitBounds(bounds);

var bounds = new google.maps.LatLngBounds();

//Methode
function initialize() {

  var mapOptions = {
    center: {
      lat: 54.4210664,
      lng: 16.410611000000017
    },
    zoom: 70,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
  //ROUTE
  var directionsDisplay = new google.maps.DirectionsRenderer();
  var directionsService = new google.maps.DirectionsService();

  directionsDisplay.setMap(map);
  directionsDisplay.setOptions({
    suppressMarkers: true,
    preserveViewport: true
  });

  //Marker
  var marker = new google.maps.Marker({
    position: location1,
    map: map
  });
  var marker2 = new google.maps.Marker({
    position: location2,
    map: map
  });
  var marker3 = new google.maps.Marker({
    position: location3,
    map: map
  });
  var marker4 = new google.maps.Marker({
    position: location18,
    map: map
  });
  //Zoomfunktion
  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(11);
    map.setCenter(marker.getPosition());
  });

  google.maps.event.addListener(marker2, 'click', function() {
    map.setZoom(11);
    map.setCenter(marker2.getPosition());
  });

  //Marker informationen
  var infowindow = new google.maps.InfoWindow({
    content: "Unser Urlaubsort Niechorze."
  });
  infowindow.open(map, marker);
  var infowindow2 = new google.maps.InfoWindow({
    content: "Unser Urlaubsort Rewal."
  });
  infowindow2.open(map, marker2);
  //Route berechnen
  var request = {
    origin: location1,
    destination: location2,
    travelMode: google.maps.DirectionsTravelMode.BICYCLING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      if (!bounds) bounds = response.routes[0].bounds;
      else bounds.union(response.routes[0].bounds);
      map.fitBounds(bounds);
    }
  });

  directionsDisplay2 = new google.maps.DirectionsRenderer({
    suppressMarkers: true,
    suppressInfoWindows: false,
    preserveViewport: true
  });
  directionsDisplay2.setMap(map);
  var request = {
    origin: location3,
    destination: location4,
    travelMode: google.maps.DirectionsTravelMode.BICYCLING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay2.setDirections(response);
      if (!bounds) bounds = response.routes[0].bounds;
      else bounds.union(response.routes[0].bounds);
      map.fitBounds(bounds);
    }
  });

  directionsDisplay3 = new google.maps.DirectionsRenderer({
    suppressMarkers: true,
    suppressInfoWindows: false,
    preserveViewport: true
  });
  directionsDisplay3.setMap(map);
  var request = {
    origin: location5,
    destination: location6,
    travelMode: google.maps.DirectionsTravelMode.BICYCLING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay3.setDirections(response);
      if (!bounds) bounds = response.routes[0].bounds;
      else bounds.union(response.routes[0].bounds);
      map.fitBounds(bounds);
    }
  });

  directionsDisplay4 = new google.maps.DirectionsRenderer({
    suppressMarkers: true,
    suppressInfoWindows: false,
    preserveViewport: true
  });
  directionsDisplay4.setMap(map);
  var request = {
    origin: location7,
    destination: location8,
    travelMode: google.maps.DirectionsTravelMode.BICYCLING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay4.setDirections(response);
      if (!bounds) bounds = response.routes[0].bounds;
      else bounds.union(response.routes[0].bounds);
      map.fitBounds(bounds);
    }
  });

  directionsDisplay5 = new google.maps.DirectionsRenderer({
    suppressMarkers: true,
    suppressInfoWindows: false,
    preserveViewport: true
  });
  directionsDisplay5.setMap(map);
  var request = {
    origin: location9,
    destination: location10,
    travelMode: google.maps.DirectionsTravelMode.BICYCLING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay5.setDirections(response);
      if (!bounds) bounds = response.routes[0].bounds;
      else bounds.union(response.routes[0].bounds);
      map.fitBounds(bounds);
    }
  });

  directionsDisplay6 = new google.maps.DirectionsRenderer({
    suppressMarkers: true,
    suppressInfoWindows: false,
    preserveViewport: true
  });
  directionsDisplay6.setMap(map);
  var request = {
    origin: location11,
    destination: location12,
    travelMode: google.maps.DirectionsTravelMode.BICYCLING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay6.setDirections(response);
      if (!bounds) bounds = response.routes[0].bounds;
      else bounds.union(response.routes[0].bounds);
      map.fitBounds(bounds);
    }
  });

  directionsDisplay7 = new google.maps.DirectionsRenderer({
    suppressMarkers: true,
    suppressInfoWindows: false,
    preserveViewport: true
  });
  directionsDisplay7.setMap(map);
  var request = {
    origin: location13,
    destination: location14,
    travelMode: google.maps.DirectionsTravelMode.BICYCLING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay7.setDirections(response);
      if (!bounds) bounds = response.routes[0].bounds;
      else bounds.union(response.routes[0].bounds);
      map.fitBounds(bounds);
    }
  });

  directionsDisplay8 = new google.maps.DirectionsRenderer({
    suppressMarkers: true,
    suppressInfoWindows: false,
    preserveViewport: true
  });
  directionsDisplay8.setMap(map);
  var request = {
    origin: location15,
    destination: location16,
    travelMode: google.maps.DirectionsTravelMode.BICYCLING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay8.setDirections(response);
      if (!bounds) bounds = response.routes[0].bounds;
      else bounds.union(response.routes[0].bounds);
      map.fitBounds(bounds);
    }
  });

  directionsDisplay9 = new google.maps.DirectionsRenderer({
    suppressMarkers: true,
    suppressInfoWindows: false,
    preserveViewport: true
  });
  directionsDisplay9.setMap(map);

  var request = {
    origin: location17,
    destination: location18,
    travelMode: google.maps.DirectionsTravelMode.BICYCLING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay9.setDirections(response);
      if (!bounds) bounds = response.routes[0].bounds;
      else bounds.union(response.routes[0].bounds);
      map.fitBounds(bounds);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
//Niechorze
var location1 = new google.maps.LatLng(54.094445, 15.079639);
var location5 = new google.maps.LatLng(54.094445, 15.079639);
//Rewal
var location2 = new google.maps.LatLng(54.0813087, 15.015793799999983);
var location4 = new google.maps.LatLng(54.0813087, 15.015793799999983);
//Ahlbeck
var location3 = new google.maps.LatLng(53.940628, 14.187473);
//Kolberg
var location6 = new google.maps.LatLng(54.17591729999999, 15.583266699999967);
var location7 = new google.maps.LatLng(54.17591729999999, 15.583266699999967);
//Darlowo
var location8 = new google.maps.LatLng(54.4210664, 16.410611000000017);
var location9 = new google.maps.LatLng(54.4210664, 16.410611000000017);
//Ustka
var location10 = new google.maps.LatLng(54.58056069999999, 16.861891000000014);
var location11 = new google.maps.LatLng(54.58056069999999, 16.861891000000014);
//Leba 
var location12 = new google.maps.LatLng(54.760117, 17.556311700000037);
var location13 = new google.maps.LatLng(54.760117, 17.556311700000037);
//Wladyslawowo
var location14 = new google.maps.LatLng(54.79074000000001, 18.40300000000002);
var location15 = new google.maps.LatLng(54.79074000000001, 18.40300000000002);
//Gdynia
var location16 = new google.maps.LatLng(54.5188898, 18.530540900000005);
var location17 = new google.maps.LatLng(54.5188898, 18.530540900000005);
//Danzig
var location18 = new google.maps.LatLng(54.35202520000001, 18.64663840000003);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>

我的Javascript Google地图始终显示不同的位置，而不是我的中心位置

1 个答案: