0

サイトに Google マップがあり、ユーザーの場所を取得して、ユーザーの場所と地図上の固定点への道順を表示します。マップが読み込まれると、div の小さな隅しか埋められないため、次のコードを使用してこれを回避しました。

google.maps.event.trigger(map, 'resize');

ただし、マップが指定されたレベルにズームされず、コードで指定されているようにユーザーの場所を再び中心にしないという問題が発生しました。

位置情報コード:

if (navigator.geolocation) { 
  navigator.geolocation.getCurrentPosition(geoInfo, noGeoInfo);
} else {
  noGeoInfo();
}

function geoInfo(position) { 
  navigator.geolocation.getCurrentPosition(function (position) { 
    var latitude = position.coords.latitude;                    
    var longitude = position.coords.longitude;                 
    var coords = new google.maps.LatLng(latitude, longitude); 
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = { 
      zoom: 15,        
      center: coords,
      mapTypeControl: true, 
      navigationControlOptions:
      {
        style: google.maps.NavigationControlStyle.SMALL 
      },
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    };
    map = new google.maps.Map(  document.getElementById("mapContainer"), mapOptions); 
    directionsDisplay.setMap(map); 
    var request = {
      origin: coords, 
      destination: '54.861283, -6.326805', 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
    };
    directionsService.route(request, function (response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  });
}

function noGeoInfo() { 
  var location = new google.maps.LatLng(54.861283, -6.326805); 
  var mapOptions = { 
    center: location, 
    zoom: 15, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  };
  var map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions);
  marker = new google.maps.Marker({ 
    position: location,
    map: map
  });
}

指定した場所またはズーム レベルに中央揃えされないのはなぜですか?

4

0 に答える 0