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

Question

我正在制作像应用程序一样的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);

    });

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

请帮帮我们，我真的难倒在这里

Answer 1

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);

});

Answer 2

引用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声明/作业。

Javascript - 触发1个eventListener后执行2个函数

2 个答案:

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