Search code examples
javascriptroutesbing-mapsdirections

Click on waypoint of bingmap


I have a map with bingmap and I implemented waypoints. I would like when I click in a waypoint it displays an info window.

if (!$scope.directionsManager) { _createDirectionsManager(); }
    if($scope.directionsManager.getAllWaypoints().length < 2)
    {
      $scope.directionsManager.resetDirections();
      $scope.waypoints.forEach(function (waypoint) {
        var order_waypoint = new Microsoft.Maps.Directions.Waypoint({ location: new Microsoft.Maps.Location(waypoint.lat, waypoint.lng) });
        console.log("order_waypoint", order_waypoint)
        $scope.directionsManager.addWaypoint(order_waypoint);
      })
    }
    var renderOption = {
        itineraryContainer: document.getElementById('directionsItinerary'),

        waypointPushpinOptions:{
            // icon: "http://vignette3.wikia.nocookie.net/freeciv/images/1/1c/Crystal_128_penguin.png/revision/latest?cb=20071106133132&path-prefix=es",
            // hoverIcon: "http://vignette3.wikia.nocookie.net/freeciv/images/1/1c/Crystal_128_penguin.png/revision/latest?cb=20071106133132&path-prefix=es",
            // height: 10,
            // width: 10,
            draggable: false,
            textOffset: new Microsoft.Maps.Point(-1, 3)
        }
    }
    $scope.directionsManager.setRenderOptions(renderOption);
    $scope.directionsManager.calculateDirections();

Thanks!


Solution

  • I haven't used the Bing maps API, but the docs on the Waypoint class make it look like you might need a custom pushpin in order to intercept its click event.

    var location = new Microsoft.Maps.Location(waypoint.lat, waypoint.lng);
    var pushpin = new Microsoft.Maps.Pushpin(location);
    Microsoft.Maps.Events.addHandler(pushpin, 'click', function() {
        // Implementation can go here
    });
    
    var order_waypoint = new Microsoft.Maps.Directions.Waypoint(
        {location: location, pushpin: pushpin});
    $scope.directionsManager.addWaypoint(order_waypoint);
    

    It is possible you can get a reference to the default pushpin on order_waypoint without creating your own custom one, and use addHandler to bind the click event to it. I don't have running code to test that on, and I don't see a way to get a reference to the default pushpin, only the custom one. You could try it anyway (order_waypoint.getPushpin()) and see if it works.