google maps 实现带箭头的线完整实例
google maps 实现带箭头的线完整实例
注：实例中没有画线，因为画线google API中有，很容易实现，关键是用箭头表示方向。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA4ZZxnijCQhlZlf57igoGExTwM0brOpm-All5BF6PoaKBxRWWERR0mYEVnCnlZi8Qmoq3uoivZ9cIgQ"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map = null;
var arrowIcon = null;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("mapdiv"));
map.setCenter(new GLatLng(39.917, 116.397), 5);
//箭头图标
arrowIcon = new GIcon();
arrowIcon.iconSize = new GSize(24,24);
arrowIcon.shadowSize = new GSize(1,1);
arrowIcon.iconAnchor = new GPoint(12,12);
arrowIcon.infoWindowAnchor = new GPoint(0,0);
}
var point1 = new GLatLng(39.917, 116.397);
var gmarker = new GMarker(point1);
map.addOverlay(gmarker);
var point2 = new GLatLng(38.017, 116.217);
map.addOverlay(new GMarker(point2));
var point3 = new GLatLng(38.017, 115.217);
map.addOverlay(new GMarker(point3));
var points = [point1,point2,point3];
//arrowHead(points);
midArrows(points);
}
//一个箭头
function arrowHead(points)
{
var p1=points[points.length-1];
var p2=points[points.length-2];
var dir = bearing(p2,p1);
var dir = Math.round(dir/3) * 3;
while (dir >= 120) {dir -= 120;}
arrowIcon.image = "http://www.google.com/intl/en_ALL/mapfiles/dir_"+dir+".png";
map.addOverlay(new GMarker(p1, arrowIcon));
}
//多个箭头
function midArrows(points)
{
if(points.length < 2) return;
for (var i=1; i < points.length; i++)
{
var p1=points[i-1];
var p2=points[i];
var dir = bearing(p1,p2);
var dir = Math.round(dir/3) * 3;
while (dir >= 120) {dir -= 120;}
arrowIcon.image = "http://www.google.com/intl/en_ALL/mapfiles/dir_"+dir+".png";
map.addOverlay(new GMarker(points[i], arrowIcon));
}
}
var degreesPerRadian = 180.0 / Math.PI;
function bearing( from, to )
{
var lat1 = from.latRadians();
var lon1 = from.lngRadians();
var lat2 = to.latRadians();
var lon2 = to.lngRadians();
var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );
if ( angle < 0.0 )
angle += Math.PI * 2.0;
angle = angle * degreesPerRadian;
angle = angle.toFixed(1);
return angle;
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="mapdiv" style="width: 800px; height: 600px"></div>
</body>
</html>
上一篇： memcached 修改端口号
下一篇： memcached 修改端口号