CODEWITHSUNDEEP
javascriptroutesbing-mapsdirections
oihi08
oihi08

Reputation: 735

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!

Upvotes: 0

Views: 428

Answers (1)

Merlyn Morgan-Graham
Merlyn Morgan-Graham

Reputation: 59151

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.

Upvotes: 1

Related Questions