2

私のサイトの連絡先ページでは、次の 2 つのことが起こります。

  1. ユーザーは地理位置情報を有効にしており、マップ ( map-canvas) にはユーザーの場所から事前定義された場所までのルートが表示されますdest。この機能は正常に動作します。

  2. ユーザーが地理位置情報を有効にしていないか、許可しないことを選択しています。アラートが表示され (正常に動作)、何らかのテキストがdirections-panel(正常に動作) に追加されます。このシナリオで実現したい 3 番目のことは、map-canvasを中心とした新しいマップを追加することですdest。この機能は機能していないようで、その理由がわかりません。

以下のコードは、上記を適切に表現する必要があります。

<script type="text/javascript">
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;
    var dest = "Unit 20, Tallaght Business Centre, Whitestown Road, Tallaght Business Park, Ireland";//53.282882, -6.383155
    var ourLocation = {lat :  53.282882, lng :  -6.383155}//centre attribute of the map must be a LatLng object and not hardcoded as above

    function initGeolocation() {
       if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition( success, failure );
        }
    }

    //create a new map centered on user's location, display route and show directions
    function success(position) {
      directionsDisplay = new google.maps.DirectionsRenderer();
      coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      var mapOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
      }
      map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
      directionsDisplay.setMap(map);
      directionsDisplay.setPanel(document.getElementById("directions-panel"));
      calcRoute();
    }

    //calculate the route from user's location to 'dest'
    function calcRoute() {
      var start = coords;
      var end = dest;
      var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.TravelMode.DRIVING
      };
      directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(result);
        }
      });
    }

    //tell user geoloc isn't enabled and just plot 'ourLocation' on 'map-canvas'
    function failure() {
        alert("Your browser does not have geolocation enabled so we can't give you directions to our office. Enable geolocation and try again, or consult the map for our address.");
        $("#directions-error-message").css({
          visibility: 'visible'
        });     
        var destMapOptions = {
          zoom:13,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: new google.maps.LatLng(ourLocation.lat, ourLocation.lng)
        }
        map = new google.maps.Map(document.getElementById("map-canvas"), destMapOptions);
    }

    </script>

なぜこれが機能しないのか、誰にもアイデアがありますか? すべてのヘルプが高く評価されました。

編集：上記の作業バージョン

4

2 に答える 2

3

住所ではなく、中心の LatLng オブジェクトを地図に渡す必要があります。これを機能させるには、Google の LocalSearch サービスを使用する必要があります。

var dest = {
   lat :  53.282882,
   lng :  -6.383155
}

var destMapOptions = {
    zoom:12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(dest.lat,dest.lng)
}

また、マップが var として宣言されているため、マップの関数スコープ変数ではなく、それを使用する可能性があります。

于 2012-09-05T14:09:19.237 に答える
2

マップ オプションの center 属性は、LatLng オブジェクトである必要があります。アドレス文字列としてハードコードされています。

于 2012-09-05T14:08:01.443 に答える