javascript - Let arrow marker point in the direction of another marker - Stack Overflow

admin管理员组

文章数量:1403480

I'm making a Google Maps application where a user can search for a location. This location must point into the direction of a predefined marker.

Given the following pieces of code:

The predefined marker:

      var station = new google.maps.LatLng(52.375401, 5.218824);

      var stationMarker = new google.maps.Marker({
        position:   station,
        map:        map,
        });

The marker that will be placed on the location that the user searched:

      var direction = new google.maps.LatLng(52.376423, 4.887234);

      var directionMarker = new google.maps.Marker({
        position:   direction,
        map:        map,
        draggable:  false,
        title:      "test"
        });

      directionMarker.setIcon(({
        path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
        scale: 6
        }));

How can I make sure that the direction marker (i.e the marker from the user search result) always points to the predefined marker?

I'm making use of the Google Maps API v3.

I've created a jsFiddle, which you can find here

I'm making a Google Maps application where a user can search for a location. This location must point into the direction of a predefined marker.

Given the following pieces of code:

The predefined marker:

      var station = new google.maps.LatLng(52.375401, 5.218824);

      var stationMarker = new google.maps.Marker({
        position:   station,
        map:        map,
        });

The marker that will be placed on the location that the user searched:

      var direction = new google.maps.LatLng(52.376423, 4.887234);

      var directionMarker = new google.maps.Marker({
        position:   direction,
        map:        map,
        draggable:  false,
        title:      "test"
        });

      directionMarker.setIcon(({
        path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
        scale: 6
        }));

How can I make sure that the direction marker (i.e the marker from the user search result) always points to the predefined marker?

I'm making use of the Google Maps API v3.

I've created a jsFiddle, which you can find here

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow edited Aug 14, 2014 at 9:54 Nazeem asked Aug 14, 2014 at 8:45 NazeemNazeem 76422 gold badges1010 silver badges3030 bronze badges 2

• Can you create a jsfiddle? – MrUpsidown Commented Aug 14, 2014 at 9:17
• @MrUpsidown, yes. I've just added the jsFiddle: jsfiddle/fgdan8wq – Nazeem Commented Aug 14, 2014 at 9:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Ok here you go:

1. Use the google.maps.SymbolPath.FORWARD_CLOSED_ARROW so that it points to the north.
2. Add the Geometry library to be able to pute a heading.
3. Use the rotation parameter on your direction icon.

Here is how to pute the heading from your direction marker to the station:

var heading = google.maps.geometry.spherical.puteHeading(direction,station);

Then use it to rotate your icon accordingly:

directionMarker.setIcon({
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
    scale: 6,
    rotation: heading
});

You also had one unnecessary pair of () in the above code which I have removed.

JSFiddle demo

本文标签： javascriptLet arrow marker point in the direction of another markerStack Overflow