谷歌地图v3：从地图上清除由多段线组成的圆圈 [英] google maps v3: clearing a circle made from polylines off the map
本文介绍了谷歌地图v3：从地图上清除由多段线组成的圆圈的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正试图弄清楚如何清除地图上的圆，以便用户围绕某个点绘制半径。我的clearMap功能似乎不起作用。请参阅下面的代码
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< style type =text / css>
html {height：100％}
body {height：100％; margin：0px; padding：0px}
#map_canvas {height：100％}
< / style>
< script type =text / javascript
src =http://maps.google.com/maps/api/js?sensor=false>
< / script>
< / script>
< script type =text / javascript>
var geocoder;
var map;
var count = 0;
//将点存储在数组
var points = [];
函数initialize（）{
geocoder = new google.maps.Geocoder（）;
var latlng = new google.maps.LatLng（-34.397,150.644）;
var myOptions = {
zoom：3，
center：latlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
map = new google .maps.Map（的document.getElementById（ map_canvas 的），myOptions）;
}
函数codeAddress（）{
var address = document.getElementById（address）。value;
geocoder.geocode（{'address'：address}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
map.setCenter（results [0] .geometry.location）;
var marker = new google.maps.Marker（{
map：map，
position：results [0] .geometry.location
}）;
}
else {
alert（由于以下原因，地理编码失败：+ status）;
}
}） ;
}
函数plusCount（）{
if（count == 2）{
count = 0;
}
else {
count = count +1;
function drawCircle（）{
var address = document.getElementById（address）。value;
var radius = document.getElementById（radius）.value;
var latitude = 40;
var longitude = 0;
geocoder.geocode（{'address'：address}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
latlng =（results [ 0）.geometry.location）;
latitude = latlng.lat（）;
longitude = latlng.lng（）;
alert（latitude）;
alert（longitude）;
alert（radius）;
}
else {
alert（由于以下原因，Geocode不成功：+ status）;
}
}）;
//度到弧度
var d2r = Math.PI / 180;
alert（calc d2r+ d2r）;
//弧度到度
var r2d = 180 / Math.PI;
alert（calc r2d+ r2d）;
//地球半径为3,963英里
var cLat =（radius / 3963）* r2d;
alert（calc cLat+ cLat）;
var cLng = cLat / Math.cos（latitude * d2r）;
alert（calc cLng+ cLng）;
//计算分数
//在圆周上为360个点计算
（var i = 0; i< ; 360; i ++）{
var theta = Math.PI *（i / 16）;
//计算下一个X点
circleY = longitude +（cLng * Math.cos（theta））;
//计算下一个Y点
circleX =纬度+（cLat * Math.sin（theta））;
//将点添加到数组
points.push（new google.maps.LatLng（circleX，circleY））;
};
alert（completed loop）;
var colors = [＃CD0000，＃2E6444，＃003F87];
var Polyline_Path = new google.maps.Polyline（{
path：points，
strokeColor：colors [count]，
//折线
strokeOpacity：1，
//介于0.0和1.0之间
strokeWeight：1，
//以像素为单位的描边宽度
fillColor：colors [count]，
fillOpacity：.5
}）;
Polyline_Path.setMap（map）;
$ b函数clearMap（）{
if（points）{
for（i in points）{
点[I] .setMap（空）;
}
points.length = 0;
}}
< / script>
< / head>
< body onload =initialize（）>
-moz-outline-radius：20px; -moz-box-sizing：padding-box; -moz- outline-style：solid; -moz-outline-color：＃9FB6CD;
- moz-outline-width：10px;>< / div>
< div>
邮编：< input id =addresstype =textboxvalue =>
半径：< input id =radiustype =textboxvalue =>
< input type =buttonvalue =Findonclick =codeAddress（）>
< input type =buttonvalue =Draw Radiusonclick =drawCircle（）; plusCount（）>
< input type =buttonvalue =Resetonclick =clearMap（）>
< / div>
< / body>
解决方案
如果您使用google.maps.Circle创建您的圈子。然后你可以创建它们并添加tehm到像这样的数组中
var options = {
strokeColor：＃CD0000，
strokeOpacity，用于：0.8，
strokeWeight，用于：2，
填充颜色：＃2E6444，
fillOpacity：0.5，
图：图，
中心：经纬度，
radius：parseInt（radius）
};
圈子[circles.length] =新google.maps.Circle（选项）;
然后您的清晰地图函数将是
函数clearMap（）{
if（circles）{
for（var idx = 0; idx< circles.length; idx ++）{
circles [ IDX] .setMap（空）;
}
}
}
I am trying to figure out how to clear circles off the map that allows users to draw a radius around a point. My clearMap function doesn't seem to work. See code below
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
</script>
<script type= "text/javascript">
var geocoder;
var map;
var count=0;
//Store points in array
var points = [];
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 3,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function plusCount(){
if (count==2){
count=0;
}
else{
count=count +1;
}
}
function drawCircle() {
var address=document.getElementById("address").value;
var radius=document.getElementById("radius").value;
var latitude=40;
var longitude=0;
geocoder.geocode( { 'address': address}, function(results, status){
if (status==google.maps.GeocoderStatus.OK){
latlng=(results[0].geometry.location);
latitude=latlng.lat();
longitude=latlng.lng();
alert(latitude);
alert(longitude);
alert (radius);
}
else{
alert("Geocode was not successful for the following reason: " + status);
}
});
//Degrees to radians
var d2r = Math.PI / 180;
alert("calc d2r " + d2r);
// Radians to degrees
var r2d = 180 / Math.PI;
alert("calc r2d " + r2d);
// Earth radius is 3,963 miles
var cLat = (radius / 3963) * r2d;
alert("calc cLat " + cLat);
var cLng = cLat / Math.cos(latitude * d2r);
alert("calc cLng " + cLng);
// Calculate the points
// Work around 360 points on circle
for (var i=0; i < 360; i++) {
var theta = Math.PI * (i/16);
// Calculate next X point
circleY = longitude + (cLng * Math.cos(theta));
// Calculate next Y point
circleX = latitude + (cLat * Math.sin(theta));
// Add point to array
points.push(new google.maps.LatLng(circleX, circleY));
};
alert("completed loop");
var colors=["#CD0000","#2E6444","#003F87" ];
var Polyline_Path = new google.maps.Polyline({
path: points,
strokeColor: colors[count],
// color of the outline of the polyline
strokeOpacity: 1,
// between 0.0 and 1.0
strokeWeight: 1,
// The stroke width in pixels
fillColor: colors[count],
fillOpacity: .5
});
Polyline_Path.setMap(map);
}
function clearMap(){
if(points){
for( i in points){
points[i].setMap(null);
}
points.length=0;
}}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:460px;
-moz-outline-radius:20px; -moz-box-sizing:padding-box; -moz-outline- style:solid ;-moz-outline-color:#9FB6CD;
- moz-outline-width:10px;"></div>
<div>
Zip Code: <input id="address" type="textbox" value="">
Radius:<input id="radius" type="textbox" value="">
<input type="button" value="Find" onclick="codeAddress() ">
<input type="button" value="Draw Radius" onclick= "drawCircle() ; plusCount()">
<input type="button" value="Reset" onclick= "clearMap()">
</div>
</body>
解决方案
If you create your circles using google.maps.Circle. Then you can create them and add tehm to an array like this
var options = {
strokeColor: #CD0000,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: #2E6444,
fillOpacity: 0.5,
map: map,
center: latlng,
radius: parseInt(radius)
};
circles[circles.length] = new google.maps.Circle(options);
Then your clear map function will be
function clearMap(){
if (circles){
for (var idx=0;idx<circles.length;idx++){
circles[idx].setMap(null);
}
}
}
这篇关于谷歌地图v3：从地图上清除由多段线组成的圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
