首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网络技术 > 网络基础 >

怎么使用googleApi和ajax在google地图上画圈

2012-04-06 
如何使用googleApi和ajax在google地图上画圈?我的开发平台是vs2008 + sqlserver2005 + google地图

如何使用googleApi和ajax在google地图上画圈?
我的开发平台是vs2008 + sqlserver2005 + google地图
================================================================
数据库中存有某个设备的经纬度和以这个设备为中心点的半径值,
如经度:113.2345,纬度:22.8713, 半径为200;
我该如何使用google的api结合ajax来画圈到地图上?
(说明:其实这个圈是个多边型,边形值越大,就越接近圆,也就是画个多边型,由n个等腰三角形组成的多边型)

[解决办法]

HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false"type="text/javascript"></script><script type="text/javascript">google.load("maps", "2.x");google.setOnLoadCallback(initialize);var map = null;function initialize() {// 檢查瀏覽器是否可使用 Google Map APIif ( GBrowserIsCompatible() ) {map = new google.maps.Map2(document.getElementById('map'));// 設定地圖中心點map.setCenter(new GLatLng(25.036772,121.520269), 10);// 畫圓!draw(5/*半徑,公里*/, 36/*以多少點畫圓*/);} // ifelse {alert('您的瀏覽器不支援Google Map');} // else}////pan and zoom to fitvar bounds = new GLatLngBounds();function fit(){map.panTo(bounds.getCenter());map.setZoom(map.getBoundsZoomLevel(bounds));}//calling circle drawing functionfunction draw(givenRad, givenQuality){map.clearOverlays();bounds = new GLatLngBounds();var centre = map.getCenter()drawCircle(centre, givenRad, givenQuality);fit();}////////////////////////// circle///////////////////////////////function drawCircle(center, radius, nodes, liColor, liWidth, liOpa, fillColor, fillOpa){// Esa 2006//calculating km/degreevar latConv = center.distanceFrom(new GLatLng(center.lat()+0.1, center.lng()))/100;var lngConv = center.distanceFrom(new GLatLng(center.lat(), center.lng()+0.1))/100;//Loopvar points = [];var step = parseInt(360/nodes)||10;for(var i=0; i<=360; i+=step){var pint = new GLatLng(center.lat() + (radius/latConv * Math.cos(i * Math.PI/180)), center.lng() +(radius/lngConv * Math.sin(i * Math.PI/180)));points.push(pint);bounds.extend(pint); //this is for fit function}fillColor = fillColor||liColor||"#0055ff";liWidth = liWidth||2;var poly = new GPolygon(points,liColor,liWidth,liOpa,fillColor,fillOpa);map.addOverlay(poly);}</script></HEAD><BODY onload="initialize()" onunload="GUnload()"><div id="map" style="width: 500px; height: 300px"></div></BODY></HTML> 

热点排行