0

我正在制作一个类似 googleMaps 的应用程序，当单击应用程序中的图像时，我需要它执行两个功能。第一个函数显示带有对象名称的内容字符串。第二个函数显示从用户当前位置到单击对象的方向。

// Creating separate markers and locations
    // King Tuts
    var tutsImg = "kingTutsIcon.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: marker, 
            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);

    });

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

    });

这是创建在两个函数中使用的不同变量的代码。但是，应用程序只执行第一个功能（显示名称），并没有显示在执行第二个功能后应该出现的方向。

请帮助大家，我真的很难过

4

2 回答 2

0

参考https://developers.google.com/maps/documentation/javascript/directions

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var haight = new google.maps.LatLng(37.7699298, -122.4469157);
var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: haight
  }
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var selectedMode = document.getElementById("mode").value;
  var request = {
      origin: haight,
      destination: oceanBeach,
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

根据上面的示例..您需要初始化这些对象

directionsService = new google.maps.DirectionServices()
directionsDisplay = new google.maps.DirectionsRenderer()

..地图加载到您的页面后..您需要执行以下方法。

directionsDisplay.setMap(map)

在您的示例中.. 替换以下

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

    });

和

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

并删除多余的 google.maps.event.addListener 声明/分配。

于 2013-07-20T16:28:41.250 回答
0

google.maps.InfoWindow.open有两个参数：

open(map?:Map|StreetViewPanorama, anchor?:MVCObject) | None | Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset (see InfoWindowOptions). The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow.

calcRoute 是一个函数，而不是 MVCObject，不确定您期望发生什么。

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

});
于 2013-07-20T16:07:19.740 回答