Google マップのカスタム オーバーレイを作成しています。私は深刻な緯度と経度のポイントを持っており、それらを指す矢印とそこから指す矢印を使用して画像を作成したいと考えています。Google のカスタム オーバーレイ チュートリアル (https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays) に従っています。
私のオーバーレイの「コンストラクター」では、次の行が失敗します: 'this.setMap(this.map_);'
それを機能させるために何をする必要がありますか?
これがオーバーレイの「コンストラクタ」です。破線は一番下です。私がテストしているので、「アラート」への呼び出しはすべてそこにあります。最後の呼び出しに到達していないため、「this.setMap()」が機能していないと思います。
//This serves as a constructor for a link overlay
function LinkOverlay(startNodeCoordinates, endNodeCoordinates, map)
{
alert("constructor start");
this.map_ = map;
//These are the lat-long coordinates of where the link starts and ends
this.startNodeCoordinates_ = startNodeCoordinates;
this.endNodeCoordinates_ = endNodeCoordinates;
alert("constructor coordinates stored");
// We define a property to hold the image's
// div. We'll actually create this div
// upon receipt of the add() method so we'll
// leave it null for now.
this.div_ = null;
alert("constructor div saved");
//We need to know if we draw the arrow up or down and left or right.
//We calculate this by finding the bearing between the two nodes. If
//the bearing is N to NE, then the arrow goes up and to the right,
//for example. If the bearing is E to SE, then the arrow goes down
//and to the right, and so on.
//Calculate bearing
/*
* This algorithm determines the bearing (or angle) between two coordinate points.
* It was adapted from http://www.movable-type.co.uk/scripts/latlong.html
*/
alert("constructor calculating bearing")
this.bearing_ = null;
var lat1 = this.startNodeCoordinates_.lat();
var lat2 = this.endNodeCoordinates_.lat();
var dLon = this.startNodeCoordinates_.lng() - this.endNodeCoordinates_.lng();
var y = Math.sin(dLon) * Math.cos(lat2);
var x = Math.cos(lat1)*Math.sin(lat2) -
Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
this.bearing_ = Math.atan2(y, x);
alert("constructor bearing found (bearing = " + this.bearing_ + ")");
this.arrowUp_ = null;
this.arrowRight_ = null;
this.image_ = null;
alert("constructor picking image");
if((this.bearing_ >= 0 && this.bearing_ < (Math.PI * 0.5)) || this.bearing_ == (Math.PI * 2))
{
alert("constructor NE");
//If bearing is N to NE, the arrow goes up and to the right
this.arrowUp_ = new Boolean(true);
this.arrowRight_ = new Boolean(true);
this.image_ = "../../Content/map_images/link_overlay/up_right_black.png";
}
else if(this.bearing_ >= (Math.PI * 0.5) && this.bearing_ < Math.PI)
{
alert("constructor SE");
//If bearing is E to SE, the arrow goes down and to the right
this.arrowUp_ = new Boolean(false);
this.arrowRight_ = new Boolean(true);
this.image_ = "../../Content/map_images/link_overlay/down_right_black.png";
}
else if(this.bearing_ >= Math.PI && this.bearing_ < (Math.PI * 1.5))
{
alert("constructor SW");
//If bearing is S to SW, the arrow goes down and to the left
this.arrowUp_ = new Boolean(false);
this.arrowRight_ = new Boolean(false);
this.image_ = "../../Content/map_images/link_overlay/down_left_black.png";
}
else
{
alert("constructor NW");
//If bearing is W to NW, the arrow goes up and to the left
this.arrowUp_ = new Boolean(true);
this.arrowRight_ = new Boolean(false);
this.image_ = "../../Content/map_images/link_overlay/up_left_black.png";
}
alert("constructor adding to map");
// Explicitly call setMap() on this overlay
this.setMap(this.map_);
alert("constructor end");
}
//This "subclasses" a link overlay from Google Map's OverlayView class
LinkOverlay.prototype = new google.maps.OverlayView();
これは、(Razor 構文で) 新しい LinkOverlays を作成するコードです。
@:var startNodeCoordinates = new google.maps.LatLng('@startNode.Latitude', '@startNode.Longitude');
@:var endNodeCoordinates = new google.maps.LatLng('@endNode.Latitude', '@endNode.Longitude');
@:var routeLine = new LinkOverlay(startNodeCoordinates, endNodeCoordinates, networkMap);