試圖用現有的eventListener調用一個函數

Question

我對javascript的知識不是很好，所以我不確定如何從同一個事件監聽器加載第二個函數。

var tutsImg = "houseProxy.jpg"; 
    var kingTuts = new google.maps.LatLng(55.86256, -4.265); 
    var tutsDisplay = new google.maps.Marker({ 
    position: kingTuts, 
    map: map, 
    icon: tutsImg, 
    title:"King Tut's Wah Wah Hut" 
    }); 

    var contentString = '<div id="content">'+ 
    '<div id="siteNotice">'+ 
    '</div>'+ 
    '<h2 id="firstHeading" class="firstHeading">King Tuts Wah Wah Hut</h2>'+ 
    '<div id="bodyContent">'+ 
    '</div>'+ 
    '</div>'; 

    var infowindow = new google.maps.InfoWindow({ 
     content: contentString 
    }); 


    // Creating directions 
    function calcRoute() { 
      var request = { 
      origin: 'Glasgow', 
      destination: kingTuts, 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
     } 

     directionsService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 

      directionsDisplay.setDirections(response); 
      } 
     }); 
     } 

    google.maps.event.addListener(tutsDisplay, 'click', function() { 
     infowindow.open(map,tutsDisplay); 
     calcRoute(); 
    }); 

所以我在這裏創建變量來顯示我選擇的建築物的位置上的自定義標記。但我也想調用這個函數，它計算並顯示從用戶當前位置到單擊圖標位置的方向。

有幫助嗎？

Answer 1

我不能完全理解是什麼問題。 但我編寫的代碼將顯示從用戶位置 到單擊地圖上的位置的方向。爲了獲取用戶位置，我使用了地理定位API（HTML5）。

我希望這可以幫助您:)

(function(global) { 
    var google = global.google; 
    var directionsService = new google.maps.DirectionsService(); 
    var directionsDisplay; 

    // initialize google map 
    var initialize = function() { 
     var mapOptions = { 
      center: new google.maps.LatLng(-34.397, 150.644), 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     // initialize map 
     var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

     directionsDisplay = new google.maps.DirectionsRenderer(); 
     directionsDisplay.setMap(map); 


     // add event on map click 
     // @param {Object} event The custom map event object 
     // which contain latitude and langitude 
     google.maps.event.addListener(map, 'click', function(event) { 
      // getUserPosition is async function 
      // because it require user permission 
      getUserPosition(calcRoute.bind(global, event.latLng)); 
     }); 
    }; 

    // html 5 geolocation API 
    // Get user position 
    var getUserPosition = function(callback) { 
     global.navigator.geolocation.getCurrentPosition(function(position) { 
      var latitude = position.coords.latitude; 
      var langitude = position.coords.longitude; 
      // convert user position to google.maps 
      // LatLng object 
      var origin = new google.maps.LatLng(latitude, langitude); 

      callback(origin); 
     } /*, onError */); 
    }; 

    // calc direction from user location 
    // to position clicked on map 
    var calcRoute = function(distPosition, originPosition) { 

     var request = { 
      origin: originPosition, 
      destination: distPosition, 
      travelMode: google.maps.TravelMode.DRIVING // it's work onliy for one continent 
     }; 

     directionsService.route(request, function(result, status) { 
      if (status === google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(result); 
      } 
     }); 
    }; 

    // events 
    google.maps.event.addDomListener(window, 'load', initialize); 
}(this)); 

鏈接上gist