googl地图提供了google.maps.Circle类实现圆形叠加层的显示,详细的方法和属性可以参考google map Api.
实现绘制圆形只要知道圆心和半径即可,半径可以通过两个坐标点之间的距离求的。
根据两个经纬度来计算半径,方法如下:
function calculationDistance(lat1, lon1, lat2, lon2) {
var R = 6371;//地球半径 km
var dLat = (lat2 - lat1) * Math.PI / 180;
var dLon = (lon2 - lon1) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
对返回的值可以进行处理一下:
function getDistance(distance) {
//大于1 保留两位小数
if (distance > 1) return distance.toFixed(2) + "km";
//小于1 表示不到1km,使用单位"m"
else if (distance <= 1) return Math.round(distance * 1000) + "m";
}
得到两点之间的半径了,就可以使用google map api 提供的方法显示圆形。
var drawCircle = function () {
var circle;
google.maps.event.addListenerOnce(mapObj, "click", function (event) {
var radius = 0;
var markerCenter = new google.maps.Marker({ position: event.latLng, map: mapObj, draggable: false });
var markerRadius = new google.maps.Marker({ position: event.latLng, map: mapObj, draggable: true, title: title });
google.maps.event.addListener(markerRadius, 'drag', function (MouseEvent) {
radius = calculationDistance(markerCenter.getPosition().lat(), markerCenter.getPosition().lng(), MouseEvent.latLng.lat(), MouseEvent.latLng.lng());
circle.setRadius(radius * 1000);
});
var circleOptions = {
map: mapObj,
center: event.latLng,
radius: radius,
strokeWeight: 0
};
circle = new google.maps.Circle(circleOptions);
});
}
在页面中添加按钮触发画圆事件,拖动标注进行画圆。
- 大小: 81.1 KB
分享到:
相关推荐
安卓 android google map 谷歌地图
Google Map API 使用示例
1:实现对圆形、多边形、点标记、折线 等的绘制; 2:支持单个绘制 或者 多个绘制的选择; 3:支持对绘制后的图形进行删除; 4:支持对绘制后的图形进行编辑,调整; 5:支持根据图形数据显示到地图上,进行后续操作...
Motor map绘制使用说明 以前做的一些研究,记录一下,否则都快尘封了。 根据输入的工况和已知电机系统的map数据,绘制对应工况下的效率。 插值选择不同转速下的效率点 ,这里是对应的NEDC工况
google map 的应用实例,可以使用离线地图,很实用
使用google map的API开发的LBS小软
Google Map API 接口调用。
GOOGLE MAP api 7个案例。 CurrentAddress 得到当前位置 gMap 地形 路线 GoogleMapDemo 当前位置 MAP 绘制路线 MapView 放大缩小 WeatherMap 在MAP上添加图片 WorldCities 城市经纬度的切换 以及 动画切换效果
matlab电机效率map图绘制,matlab电机效率map图绘制
Google Map MarkerCluster使用簡介 可使用此方式使marker自動表現群聚 相當的方便!
Google mapGoogle mapGoogle mapGoogle mapGoogle mapGoogle mapGoogle map
但是,对于我来说,在ASP.NET页面中使用JavaScript来调用Google Map的API有一定难度,尤其是利用服务器端函数来动态画出Google Map。例如,我想从SQL Server中读取经纬度信息,然后在Google Map中插入一个点。如果...
电机效率map绘制工具,含详细注释说明。
googleMap__谷歌___地图_.ppt
绘制电机map图的matlab程序和例程,里边有map需要的电机的数据,不过比较少,绘制出来的线比较稀疏,数据丰富了,曲线就密集了
googleMap根据经纬度获取地理位置,里面有使用代码,只需填入经纬度即可获取地理位置信息
很多人都知道Google Map,但是在使用时都需要在Web上使用,程序是使用C#开发的本地使用Google Map的客户端程序,同时具备数据库,Google Map显示的标记以及标记信息完全存放在本地数据库中,单击数据库中的信息,...
该实例实现google map和ExtJs结合开发,实现图层管理、图层可见性控制、图层要素详细信息查看等功能。
通过webbrowser加载html页面调用js的方式实现绘制可编辑圆形和多边形的功能。 要求:1.net 4.0 2.IE8以上 3.需要可以打开谷歌地图和谷歌开发key 4.因为是从之前的项目里剥离出来的,界面都是英文,不过不影响使用;
谷歌地图Google Map API中文开发文档 V3