在 Google 地图标记周围绘制圆圈
4.62/5 (6投票s)
使用 google map api v3 在标记周围绘制圆圈，
介绍
Google Maps API 用于将地图嵌入网页。当前最新版本是 3。
V3 为移动应用程序和桌面浏览器应用程序添加了功能。
背景
在本帖中，我们将介绍
- 如何在 Google 地图中标记周围绘制圆形。
- 移动标记位置时如何更改圆形位置。
- 使用滑块更改圆形的半径（增大/减小尺寸）。
使用代码
在此示例中，我使用了 Google Map API 版本 3。
我们将逐步理解其功能。
创建一个新的 ASP.Net 网页应用程序，并添加 ViewMap.aspx 页面。
步骤 1：在页面中添加文本框以显示地图上选定的纬度和经度。
<asp:TextBox ID="txtPointA1" runat="server" ClientIDMode="Static" Enabled="false"
Width="170px"></asp:TextBox>
<asp:TextBox ID="txtPointA2" runat="server" ClientIDMode="Static" Enabled="false"
Width="170px"></asp:TextBox> 创建了 2 个文本框，一个用于纬度，一个用于经度。
当用户将标记从一个位置移动到另一个位置时，这些文本框的值会发生变化。
以下是获取地图当前纬度和经度并将其值设置到文本框中的代码。
function setLatLongValue() {
jQuery('#txtPointA1').val(currentlatlng.lat());
jQuery('#txtPointA2').val(currentlatlng.lng());
}
步骤 2：在页面中添加滑块以更改圆的半径。
AjaxControlToolkit 中提供了 SliderExtender。
首先，您必须将 AjaxControlToolkit 添加到项目中。要在页面中使用 AjaxControlToolkit 控件，请在页面顶部的 @Page 指令之后使用 @Register 指令将其添加，如下所示：
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> 这将会在您的 aspx 页面中注册 AjaxControlToolkit，现在您可以使用 AjaxControlToolkit.dll 中提供的控件。
现在，使用 TagPrefix 添加 SliderExtender，如下所示。
<asp:TextBox ID="txtPointB1" runat="server"
onchange="drawCircle();" ClientIDMode="Static"></asp:TextBox>
<ajaxToolkit:SliderExtender ID="sliderRadius" BehaviorID="sliderRadius" runat="server"
TargetControlID="txtPointB1" Minimum="200" Maximum="2000"
BoundControlID="txtRadiusShow"
EnableHandleAnimation="true" EnableKeyboard="false" />
<asp:TextBox ID="txtRadiusShow" runat="server" MaxLength="4" CssClass="setmargin"
ClientIDMode="Static"></asp:TextBox> <span style="font-size: 9pt;"> </span>
Slider extender 控件允许用户从有限的范围内选择一个数值。滑块的方向可以是水平的或垂直的，它还可以充当“离散”滑块，允许在其范围内只取指定数量的值。
添加了 SliderExtender 控件以及 2 个文本框，一个用于 TargetControlID，一个用于 BoundControlID。
BoundControlID 是一个 TextBox 或 Label 的 ID，它动态显示滑块的值。
TargetControlID 是目标控件。
在 TargetControlID 文本框（txtPointB1）中，当滑块值改变时，会调用 drawCirlce() JavaScript 函数。
此函数在 onchange 事件中被调用。
在页面中添加 Div 标签以加载地图
<div id="map" style="height: 500px; width: 900px;" />
现在，创建 JScript 页面，其中包含所有必需的 Google 地图函数。
- 加载 Google 地图
- 设置标记，
- 在标记周围绘制圆形
- 点击标记时创建信息窗口。
文件名：GoogleMapV3.js
步骤 3： 在 GoogleMapV3.js 文件中创建 loadMap 函数
var map;
var circle;
var marker;
var currentlatlng = new google.maps.LatLng(23.06368, 72.53135);
var infowindow;
function loadMap() {
setLatLongValue();
var mapOptions = {
zoom: 16,
center: currentlatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addDomListener(map, 'click', function (e) {
currentlatlng = e.latLng;
if (currentlatlng) {
map.panTo(currentlatlng);
setLatLongValue();
setMarker();
}
});
}
声明地图、圆形、标记、当前纬度/经度和信息窗口所需的所有变量。
地图是使用 Google 提供的 google.maps.Map 类创建的。
添加了 mapOption。
- center ：保存地图位置坐标。（创建一个 LatLng 对象来保存此位置，通过传递位置的坐标（纬度、经度）进行创建）
- zoom ：指定初始地图缩放级别。
- mapTypeId ：指定初始地图类型（ROADMAP、SATELLITE、HYBRID 或 TERRAIN）。
此地图已加载到 aspx 页面中创建的（名为 'map'）DIV 中。
添加了事件监听器以处理地图区域中的单击事件，在该事件处理程序中，您需要为以下功能进行处理：
- 在点击点上设置标记
- 需要调用 map.PanTo (currentlanlong)，此方法会将地图中心更改为给定的点（纬度、经度）。
步骤 4：创建绘制圆形的函数。
function drawCircle() {
if (circle != undefined)
circle.setMap(null);
var radius = 200;
if (jQuery('#txtPointB1').val() != '' && !isNaN(jQuery('#txtPointB1').val()) && parseInt(jQuery('#txtPointB1').val()) > 0) {
radius = parseInt(jQuery('#txtPointB1').val());
}
jQuery('#txtPointB1').val(radius.toString());
var options = {
strokeColor: '#800000',
strokeOpacity: 1.0,
strokeWeight: 1,
fillColor: '#C64D45',
fillOpacity: 0.5,
map: map,
center: currentlatlng,
radius: radius
};
circle = new google.maps.Circle(options);
} 如上代码所示，从文本框（txtPointB1）获取圆形的当前半径值。
要绘制圆形，您需要设置以下属性：
- clickable ：指示此圆形是否处理鼠标事件。默认为 true。
- draggable ：用于在地图上拖动此圆形。默认为 false。
- fillColor ：用于填充圆形区域的颜色。
- fillOpacity ：用于设置 0.0 到 1.0 之间的填充不透明度。
- map ：要在其上显示圆形的地图。
- radius ：地球表面以米为单位的半径。
- strokeColor ，- strokeOpacity
- strokeWeight ：描边的宽度（以像素为单位）。 （圆形周围的边框）
现在通过设置以上选项来创建 Circle 类的实例（new google.maps.Circle(options)）。
当您从 aspx 页面更改滑块值时，它会更改圆的半径并将其设置到地图上（请参见下图）。
步骤 5：创建设置标记的函数
function setMarker() {
if (marker != undefined)
marker.setMap(null);
marker = new google.maps.Marker({
position: currentlatlng,
draggable: true,
map: map
});
if (marker) {
google.maps.event.addDomListener(marker, "dragend", function () {
currentlatlng = marker.getPosition();
setLatLongValue();
drawCircle();
});
drawCircle();
}
} 标记是使用 google.maps.Marker 类创建的，通过设置当前纬度经度位置和 draggable=true。
添加了标记的 dragened 事件监听器，以便在标记位置更改时（或标记从一个点拖动到另一个点时）重绘圆形。
步骤 6：创建在标记点击时显示信息窗口的代码
google.maps.event.addListener(marker, "click", function () {
var data = '<div>Current LatLong:</div><div>' + currentlatlng + '</div>';
infowindow = new google.maps.InfoWindow({
content: data,
position: currentlatlng
});
infowindow.open(map);
}); 如上源文件所示，信息窗口是在标记点击事件中创建的。
InfoWindow 用于在点击标记时渲染文本信息。
InfoWindow 具有以下可用选项（属性）：
- content ：要在 InfoWindow 中显示的内容。这可以是 HTML 元素、纯文本字符串或包含 HTML 的字符串。InfoWindow 的大小将根据内容确定。要为内容设置显式大小，请将 content 设置为具有该大小的 HTML 元素。
- position ：要显示此 InfoWindow 的 LatLng。如果 InfoWindow 是使用锚点打开的，则将使用锚点的位置。
步骤 7：在页面头部添加 googleapi JavaScript 文件和 GoogleMapV3.js 文件以加载 Google 地图。
<script language="javascript" src="Scripts/jquery-1.4.1.min.js"
type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"
type="text/javascript"></script>
<script src="Scripts/GoogleMapV3.js" type="text/javascript"></script> 请不要忘记在页面中放置 googleapi JavaScript 源，否则 Google 地图将无法工作。
步骤 8：最后，从页面中调用 window 加载事件上的 loadMap 函数。
<script type="text/javascript" language="javascript">
$(window).load(function () {
loadMap();
});
</script> 当窗口加载且地图即将加载到 div 区域时，将调用 loadMap 函数。