Google Maps: Attaching events on polyline icons

问题:

I have a page where I'm trying to simulate ship locations on a map. Some of these ships are at a location a percentage of the way on a polyline, others are are at a single point marker.

With the ships that are a percentage of the way along a polyline, I'm able to display the icon correctly. What I'd like to do is attach events purely on that icon, and not on the whole polyline.

My code is at http://www.cleancruising.com.au/map_allShipLoc2.asp

I've also tried to alternatively calculate the LatLng of the ship location by using google.maps.geometry.spherical.computeDistanceBetween, but as this uses spherical geometry, the points don't translate properly on a flat map.

回答1:

For calculating the LatLng of the ship location, see this thread from the Google Maps API v3 group, and the example in it

Below is the modified GetPointAtDistance function modified from Mike Williams' (v2) epoly library

// === A method which returns a GLatLng of a point a given distance along the path ===
// === Returns null if the path is shorter than the specified distance ===
google.maps.Polygon.prototype.GetPointAtDistance = function(metres) {
  // some awkward special cases
  if (metres == 0) return this.getPath().getAt(0);
  if (metres < 0) return null;
  if (this.getPath().getLength() < 2) return null;
  var dist=0;
  var olddist=0;
  for (var i=1; (i < this.getPath().getLength() && dist < metres); i++) {
    olddist = dist;
    dist += this.getPath().getAt(i).distanceFrom(this.getPath().getAt(i-1));
  }
  if (dist < metres) {return null;}
  var projection = this.getMap().getProjection(); 
  if (!projection) {
    alert("no projection");
    return; 
  }
  // Project 
  var p1= projection.fromLatLngToPoint(this.getPath().getAt(i-2));
  var p2= projection.fromLatLngToPoint(this.getPath().getAt(i-1));
  var m = (metres-olddist)/(dist-olddist);
  // alert("p1="+p1+" p2="+p2+" m="+m);
  // Unproject 
  return projection.fromPointToLatLng(new google.maps.Point( p1.x + (p2.x-p1.x)*m, p1.y + (p2.y-p1.y)*m));
}