如何在谷歌地图Api V3中更改圆形边界自动更改标记颜色我通过在地图上显示圆圈和标记来完成... [英] How Can I Change The Marker Color Automatically With The Circle Boundary Changed In Google Map Api V3..I Have Done By Showing The Circle And Marker Over Map...
本文介绍了如何在谷歌地图Api V3中更改圆形边界自动更改标记颜色我通过在地图上显示圆圈和标记来完成...的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<％@ Page 语言 = C＃ AutoEventWireup = true CodeFile = CircleDragableIncreaseRadius.aspx.cs 继承 = CircleDragableIncreaseRadius ％>
< ！DOC TYPE html PUBLIC - // W3C // DTD < span class =code-attribute> XHTML 1.0 Transitional // EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd >
< html xmlns = http：/ /www.w3.org/1999/xhtml\">
< head id = Head1 runat = server >
< title > Google地图 - 围绕点半径绘制交互式圆圈< / title >
< script type = < span class =code-keyword> text / javascript src = http：/ /maps.googleapis.com/maps/api/js?v=3.6&sensor=false\"> < / script >
<％ - < script src =〜/ JScript .jstype =text / javascript>< / script> - ％>
< script 类型 = text / javascript >
var map;
function LoadMap（）{
var center_pt = new google.maps.LatLng（ 28 。 992226 ， 77 。 705557 ）;
var mapOptions = {
zoom： 8 ，
center： center_pt，
mapTypeControl： false ，
streetViewControl： true ，
zoomControlOptions：{
style：google.maps.ZoomControlStyle.SMALL
}
};
map = new google.maps。地图（ document .getElementById（ map_canvas），mapOptions）;
map.setMapTypeId（google.maps.MapTypeId.ROADMAP）;
var styles = [
{elementType： geometry，
样式：[
{hue： ＃00ffe6}，
{饱和度：-10}
]
}，{
featureType： road，
el ementType： geometry，
stylers：[
{lightness： 100 }，
{visibility： 简化}
]
}，{
featureType： road，
elementType： labels，
样式：[
{visibility： off}
]
}
];
map.setOptions（{styles：styles}）;
// map.setOptions（mapOptions）;
initWidget（map）;
}
// 绘制小部件圈
function initWidget（map）{
var distanceWidget = new DistanceWidget（map）;
google.maps.event.addListener（distanceWidget，' distance_changed'， function （）{
displayInfo（distanceWidget）; // 将核心过滤器逻辑放在这里
}）;
google.maps.event.addListener（distanceWidget，' position_changed'， function （）{
displayInfo（distanceWidget）; // 将核心过滤器逻辑放在这里
}）;
}
// 用于展示中心和距离
function displayInfo（widget）{
var info = document .getElementById（' divInfo'）;
info.innerHTML = ' 职位：' + widget.get（' position'）+ ' ，距离（以公里为单位）：' +
widget.get（' 距离）;
}
function DistanceWidget（map）{
this .set（' map'，map）;
此 .set（' position'，map.getCenter（））;
// 锚定图片
var image = {
url：' Images / cur.jpg'，
尺寸： new google.maps.Size（ 24 ， 24 ），来源： new google.maps.Point（ 0 ，< span class =code-digit> 0 ），
anchor： new google.maps.Point（ 12 ， 12 ）
};
// Cnter Marker
var marker = new google.maps.Marker（{
draggable： true ，
icon：image，
title：' 拖动以移动新位置！ '，
raiseOnDrag： false ，
}）;
marker.bindTo（' map'，此）;
marker.bindTo（' position'，此）;
// Radius Widget
var radiusWidget = new RadiusWidget（）;
radiusWidget.bindTo（' map'，此）;
radiusWidget.bindTo（' center'，这，' position'）;
此 .bindTo（' distance'，radiusWidget）;
this .bindTo（' bounds'，radiusWidget）;
}
DistanceWidget.prototype = new google.maps.MVCObject（）;
/ * ------------ ------------------创建Radius小部件------------------------- * /
function RadiusWidget（）{
var circleOptions = {
fillOpacity： 0 。 05 ，
fillColor：' ＃686868'，
strokeColor：' < span class =code-string>＃686868'，
strokeWeight： 3 ，
strokeOpacity： 0 。 5 ，
draggable： true
};
var circle = new google.maps.Circle（circleOptions）;
此 .set（' distance'， 20 ）;
this .bindTo（' bounds'，circle）;
circle.bindTo（' center'，此）;
circle.bindTo（' map'，此）;
circle.bindTo（' radius'，此）;
// 添加sizer标记
此 .addSizer_（）;
}
RadiusWidget.prototype = new google.maps.MVCObject（）;
// 距离已更改事件处理程序。
RadiusWidget.prototype.distance_changed = function （）{
this .set（' radius'， this .get（' distance'）* 1000 ）;
};
// Sizer处理程序
RadiusWidget.prototype.addSizer_ = function （）{
var image = {
url： Images / resize.jpg'，
size： new google.maps.Size（ 24 ， 24 ），
来源： new google.maps.Point（ 0 ， 0 ），
anchor： new google.maps.Point（ 12 ， 12 ）
};
var sizer = new google.maps.Marker（{
draggable： true ，
icon：image，
cursor：' ew-resize'，
title：' 拖动到调整圆圈大小！'，
raiseOnDrag： true ，
}）;
sizer.bindTo（' map'，此）;
sizer.bindTo（' position'，这，' sizer_position'）;
var me = this ;
google.maps.event.addListener（sizer，' drag'， function （）{
me.setDistance（）;
}）;
google.maps.event.addListener（sizer，' dragend'， function （）{
me.fitCircle（）;
}）;
};
// 中心更改处理程序
RadiusWidget .prototype.center_changed = function （）{
var bounds = this .get（' bounds'）;
if （bounds）{
var lng = bounds。 getNorthEast（）LNG（）;
var position = new google.maps.LatLng（ this .get（' center'）。lat（），lng）;
此 .set（' sizer_position'，position）;
}
};
// 距离计算器
RadiusWidget。 prototype.distanceBetweenPoints_ = function （p1，p2）{
if （！p1 ||！ p2）{
return 0 ;
}
var R = 6371 ; // 地球半径（km）
var dLat =（p2.lat（） - p1.lat（））* 数学 .PI / 180 ;
var dLon =（p2.lng（） - p1.lng（））* 数学 .PI / 180 ;
var a = 数学 .sin（dLat / 2 ）* 数学 .sin（dLat / 2 ）+
< span class =code-sdkkeyword> Math .cos（p1.lat（）* Math .PI / 180 ）* 数学 .cos（p2.lat（）* 数学 .PI / 180 ）*
数学 .sin（dLon / 2 ）* 数学 .sin（dLon / 2 ）;
var c = 2 * 数学 .atan2（ Math .sqrt（a）， Math .sqrt（ 1 - a））;
var d = R * c;
// 限制最大20公里和最小半公里
< span class =code-keyword> if （d> 20 ）{
d = 20 ;
}
if （d< 0 。 5 ）{
d = 0 。 5 ;
}
return d;
};
// 设置距离
RadiusWidget。 prototype.setDistance = function （）{
var pos = this .get（' sizer_position'）;
var center = this .get（' center'）;
var distance = this .distanceBetweenPoints_（center，pos）;
此 .set（' distance'，distance）;
var bounds = this .get（' bounds'）;
if （bounds）{
var lng = bounds.getNorthEast（）。 LNG（）;
var position = new google.maps.LatLng（ this .get（' center'）。lat（），lng）;
此 .set（' sizer_position'，position）;
}
};
// 更改时适合圈
RadiusWidget.prototype。 fitCircle = function （）{
var bounds = this .get（' bounds'）;
if （bounds）{
map.fitBounds（bounds）;
var lng = bounds.getNorthEast（）。lng（）;
var position = new google.maps.LatLng（ this .get（' center'）。lat（），lng）;
此 .set（' sizer_position'，position）;
}
};
< / script >
< / head >
< body onload = LoadMap（）; >
< 表格 id = form1 runat = server >
< h3 >
在Google地图上绘制一个圆圈 - jQuery Widget < / h3 >
< div id = divInfo style = font-family：Arial; font-size：12px;颜色：红色; >
< / div >
< br / >
< br / >
< div id = map_canvas 样式 = width：auto;高度：500px; >
< / div >
< / form >
< < span class =code-leadattribute> / body >
< / html >
解决方案
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CircleDragableIncreaseRadius.aspx.cs" Inherits="CircleDragableIncreaseRadius" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Google Maps - Drawing a Interactive Circle Around a Point Radius</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.6&sensor=false"></script>
<%--<script src="~/JScript.js" type="text/javascript"></script>--%>
<script type="text/javascript">
var map;
function LoadMap() {
var center_pt = new google.maps.LatLng(28.992226, 77.705557);
var mapOptions = {
zoom: 8,
center: center_pt,
mapTypeControl: false,
streetViewControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
var styles = [
{ elementType: "geometry",
stylers: [
{ hue: "#00ffe6" },
{ saturation: -10 }
]
}, {
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
}, {
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
map.setOptions({ styles: styles });
// map.setOptions(mapOptions);
initWidget(map);
}
//Draw Widget Circle
function initWidget(map) {
var distanceWidget = new DistanceWidget(map);
google.maps.event.addListener(distanceWidget, 'distance_changed', function () {
displayInfo(distanceWidget); //Put you core filter logic here
});
google.maps.event.addListener(distanceWidget, 'position_changed', function () {
displayInfo(distanceWidget); //Put you core filter logic here
});
}
//For display center and distance
function displayInfo(widget) {
var info = document.getElementById('divInfo');
info.innerHTML = 'Position: ' + widget.get('position') + ', Distance (in Km): ' +
widget.get('distance');
}
function DistanceWidget(map) {
this.set('map', map);
this.set('position', map.getCenter());
//Anchored image
var image = {
url: 'Images/cur.jpg',
size: new google.maps.Size(24, 24), origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(12, 12)
};
//Cnter Marker
var marker = new google.maps.Marker({
draggable: true,
icon: image,
title: 'Drag to move new location!',
raiseOnDrag: false,
});
marker.bindTo('map', this);
marker.bindTo('position', this);
//Radius Widget
var radiusWidget = new RadiusWidget();
radiusWidget.bindTo('map', this);
radiusWidget.bindTo('center', this, 'position');
this.bindTo('distance', radiusWidget);
this.bindTo('bounds', radiusWidget);
}
DistanceWidget.prototype = new google.maps.MVCObject();
/*------------------------------Create Radius widget-------------------------*/
function RadiusWidget() {
var circleOptions = {
fillOpacity: 0.05,
fillColor: '#686868',
strokeColor: '#686868',
strokeWeight: 3,
strokeOpacity: 0.5,
draggable: true
};
var circle = new google.maps.Circle(circleOptions);
this.set('distance', 20);
this.bindTo('bounds', circle);
circle.bindTo('center', this);
circle.bindTo('map', this);
circle.bindTo('radius', this);
// Add the sizer marker
this.addSizer_();
}
RadiusWidget.prototype = new google.maps.MVCObject();
//Distance has changed event handler.
RadiusWidget.prototype.distance_changed = function() {
this.set('radius', this.get('distance') * 1000);
};
//Sizer handler
RadiusWidget.prototype.addSizer_ = function () {
var image = {
url: 'Images/resize.jpg',
size: new google.maps.Size(24, 24),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(12, 12)
};
var sizer = new google.maps.Marker({
draggable: true,
icon: image,
cursor: 'ew-resize',
title: 'Drag to resize the circle!',
raiseOnDrag: true,
});
sizer.bindTo('map', this);
sizer.bindTo('position', this, 'sizer_position');
var me = this;
google.maps.event.addListener(sizer, 'drag', function () {
me.setDistance();
});
google.maps.event.addListener(sizer, 'dragend', function () {
me.fitCircle();
});
};
//Center changed handler
RadiusWidget.prototype.center_changed = function() {
var bounds = this.get('bounds');
if (bounds) {
var lng = bounds.getNorthEast().lng();
var position = new google.maps.LatLng(this.get('center').lat(), lng);
this.set('sizer_position', position);
}
};
//Distance calculator
RadiusWidget.prototype.distanceBetweenPoints_ = function (p1, p2) {
if (!p1 || !p2) {
return 0;
}
var R = 6371; // Radius of the Earth in km
var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * 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;
//Limit max 20km and min half km
if (d > 20) {
d = 20;
}
if (d < 0.5) {
d = 0.5;
}
return d;
};
//Set distance
RadiusWidget.prototype.setDistance = function() {
var pos = this.get('sizer_position');
var center = this.get('center');
var distance = this.distanceBetweenPoints_(center, pos);
this.set('distance', distance);
var bounds = this.get('bounds');
if (bounds) {
var lng = bounds.getNorthEast().lng();
var position = new google.maps.LatLng(this.get('center').lat(), lng);
this.set('sizer_position', position);
}
};
//Fit circle when changed
RadiusWidget.prototype.fitCircle = function () {
var bounds = this.get('bounds');
if (bounds) {
map.fitBounds(bounds);
var lng = bounds.getNorthEast().lng();
var position = new google.maps.LatLng(this.get('center').lat(), lng);
this.set('sizer_position', position);
}
};
</script>
</head>
<body onload="LoadMap();">
<form id="form1" runat="server">
<h3>
Draw a Circle on Google Maps - jQuery Widget</h3>
<div id="divInfo" style="font-family: Arial; font-size: 12px; color: Red;">
</div>
<br />
<br />
<div id="map_canvas" style="width: auto; height: 500px;">
</div>
</form>
</body>
</html> 解决方案
这篇关于如何在谷歌地图Api V3中更改圆形边界自动更改标记颜色我通过在地图上显示圆圈和标记来完成...的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
