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>
分享到:
相关推荐
谷歌地图GoogleMaps3.310 谷歌地图GoogleMaps3.310 谷歌地图GoogleMaps3.310 谷歌地图GoogleMaps3.310
java实现google maps api接口实例
Google Maps API编程资源大全
实现了经纬度定位商家地点,显示地标,点击显示商家信息,查询地标等功能。数据都是从数据库中取出的,所以运行需连接自己的数据库。
本书从易到难、由浅入深、循序渐进地介绍了Google Maps API和Google Earth API的开发技术。本书知识讲解通俗易懂,并有大量的实例供读者更加深刻地巩固所学习的知识,帮助读者更好地进行开发实践。 本书共分为18...
教你使用Google Maps API doc格式 包含实例,很好的入门教程
googlemaps googlemaps使用 maps 地图
基于Google Maps的红色旅游商务系统的设计与实现.docx基于Google Maps的红色旅游商务系统的设计与实现.docx基于Google Maps的红色旅游商务系统的设计与实现.docx基于Google Maps的红色旅游商务系统的设计与实现.docx...
本书从易到难、由浅入深、循序渐进地介绍了Google Maps API和Google Earth API的开发技术。本书知识讲解通俗易懂,并有大量的实例供读者更加深刻地巩固所学习的知识,帮助读者更好地进行开发实践。 本书共分为18...
│ └─sample1 客户端初始化。 │ └─sample2 地图定位。 │ └─sample3 地图平移。 │ └─sample4 地理坐标获取。 │ └─sample5 文件操作。
书中详细介绍Google Maps API的应用,从开发环境搭建到事件、控件、叠加层、地址解析、本地搜索等,全面介绍,网点管理系统和地图搜索应用实例。
Google Maps API开发大全,经典实例,适合Google Maps API开发初学者
flex做的googlemaps 分享一下
Google Maps JavaScript API V3应用
Google Maps二次开发 Google Maps二次开发 Google Maps二次开发
Google Maps 谷歌地图FLASH Google Maps 谷歌地图 演示地址: http://blog.jyrxw.com/index.php?q=node/34 http://map.jyrxw.com/ Flash版,带定位搜索功能
google maps中文版原版,可以运行于os4.3
<br>Written by Schuyler Erle and Rich Gibson, authors of the popular Mapping Hacks, Google Maps Hacks shares dozens of tricks for combining the capabilities of Google Maps with your own datasets....
Google Maps API android demo Eciplse project source code and javacript version Google Maps API and Place Search example html.
使用Flutter_web实现uplabs上Google Maps的UI挑战