怎么使用googleApi和ajax在googlemap下画圈

2012-12-29

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

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


<!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 API
if ( GBrowserIsCompatible() ) {
map = new google.maps.Map2(document.getElementById('map'));
// 設定地圖中心點
map.setCenter(new GLatLng(25.036772,121.520269), 10);
// 畫圓！
draw(5/*半徑,公里*/, 36/*以多少點畫圓*/);
} // if
else {
alert('您的瀏覽器不支援Google Map');
} // else
}

////pan and zoom to fit
var bounds = new GLatLngBounds();
function fit(){
map.panTo(bounds.getCenter());
map.setZoom(map.getBoundsZoomLevel(bounds));
}

//calling circle drawing function
function 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/degree
var 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;

//Loop
var 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>

热点排行

网络基础

怎么使用googleApi和ajax在googlemap下画圈