从地图中删除矩形 [英] Removing Rectangle from Map
本文介绍了从地图中删除矩形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图创建一个标记，它会在点击后创建一个矩形，然后在下一次单击时删除该矩形。该矩形正确地插入到地图中，但在下次单击时不会被删除。
var myOptions = {zoom：11，center：new我应该改变它以使矩形被正确删除？ google.maps.LatLng（37.55020520861464,126.98140242753904），mapTypeId：google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map（document.getElementById（'map'），myOptions）;
marker1 = new google.maps.Marker（{map：map，position：new google.maps.LatLng（37.55020520861464,126.98140242753904）}）;
marker2 = new google.maps.Marker（{map：map，position：new google.maps.LatLng（37.558816，126.908212）}）;
marker3 = new google.maps.Marker（{map：map，position：new google.maps.LatLng（37.580107,127.056797）}）;
marker4 = new google.maps.Marker（{map：map，position：new google.maps.LatLng（37.446290，126.862625）}）;
marker5 = new google.maps.Marker（{map：map，position：new google.maps.LatLng（37.435041,126.999528）}）;
marker6 = new google.maps.Marker（{map：map，position：new google.maps.LatLng（37.522926,126.853862）}）;
var m1 = 1;
marker1.addListener（'click'，function（）{
var rectangle1 = new google.maps.Rectangle（{$ b $ map：map，
ounds：new google.maps。 LatLngBounds（
new google.maps.LatLng（37.778261,126.98140242），
google.maps.LatLng（36.255123,128.0）
）
}）;
if （m1％2）{
rectangle1.setMap（map）;
}
else {
rectangle1.setMap（null）;
}
m1 ++;
}）;
解决方案
- 定义点击侦听器范围之外的
rectangle1变量
- 检查如果
矩形对象存在并且有一个.setMap方法。 - if它将它的map属性设置为
null（矩形当前显示），隐藏它并将其设置为null。
- 如果它不存在或者没有
.setMap方法，请创建标记。
var rectangle1;
marker1.addListener（'click'，function（evt）{
if（rectangle1&& rectangle1.setMap）{
rectangle1.setMap（null）;
rectangle1 = null;
console.log（marker 1 clicked，setMap（null））;
} else {
rectangle1 = new google.maps.Rectangle（{
map：map ，
界限：新增google.maps.LatLngBounds（
新增google.maps.LatLng（37.778261,126.98140242），
新增google.maps.LatLng（36.255123,128.0））
}）;
console.log（marker 1 clicked，create Rectangle）;
}
}）;
程式码片段：
var geocoder; var map;函数初始化（）{var myOptions = {zoom：11，center：new google.maps.LatLng（37.55020520861464,126.98140242753904），mapTypeId：google.maps.MapTypeId .ROADMAP}; map = new google.maps.Map（document.getElementById（'map'），myOptions）; marker1 = new google.maps.Marker（{map：map，title：marker 1，position：new google.maps.LatLng（37.55020520861464,126.98140242753904）}）; var rectangle1; marker1.addListener（'click'，function（evt）{if（rectangle1&& rectangle1.setMap）{rectangle1.setMap（null）; rectangle1 = null; console.log（marker 1 clicked，setMap（null） ）;} else {rectangle1 = new google.maps.Rectangle（{map：map，bounds：new google.maps.LatLngBounds（new google.maps.LatLng（37.778261,126.98140242），new google.maps.LatLng（36.255123，128.0） ））}）; console.log（marker 1 clicked，create Rectangle）;}}）;} google.maps.event.addDomListener（window，load，initialize）;
html，body，＃map {height：100％;宽度：100％; margin：0px; < script src =https：//
I am trying to create a marker that will create a rectangle on click and then remove the rectangle on the next click. The rectangle is correctly being inserted into the map but it is not being removed on the next click. What should I change to make it so that the rectangle is correctly removed?
var myOptions = {zoom:11,center:new google.maps.LatLng(37.55020520861464,126.98140242753904),mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById('map'), myOptions);
marker1 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.55020520861464,126.98140242753904)});
marker2 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.558816, 126.908212)});
marker3 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.580107, 127.056797)});
marker4 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.446290, 126.862625)});
marker5 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.435041, 126.999528)});
marker6 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.522926, 126.853862)});
var m1 = 1;
marker1.addListener('click', function() {
var rectangle1 = new google.maps.Rectangle({
map: map,
bounds: new google.maps.LatLngBounds (
new google.maps.LatLng(37.778261, 126.98140242),
new google.maps.LatLng(36.255123, 128.0)
)
});
if (m1 % 2) {
rectangle1.setMap(map);
}
else {
rectangle1.setMap(null);
}
m1++;
});
解决方案
One option:
- define the
rectangle1variable outside the scope of the click listener - check if the
rectangleobject exists and has a.setMapmethod. - if it does, set it's map property to
null(the rectangle is currently displayed), hide it, and set it to null. - if it doesn't exist, or doesn't have a
.setMapmethod, create the marker.
var rectangle1;
marker1.addListener('click', function(evt) {
if (rectangle1 && rectangle1.setMap) {
rectangle1.setMap(null);
rectangle1 = null;
console.log("marker 1 clicked, setMap(null)");
} else {
rectangle1 = new google.maps.Rectangle({
map: map,
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(37.778261, 126.98140242),
new google.maps.LatLng(36.255123, 128.0))
});
console.log("marker 1 clicked, create Rectangle");
}
});
code snippet:
var geocoder;
var map;
function initialize() {
var myOptions = {
zoom: 11,
center: new google.maps.LatLng(37.55020520861464, 126.98140242753904),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
marker1 = new google.maps.Marker({
map: map,
title: "marker 1",
position: new google.maps.LatLng(37.55020520861464, 126.98140242753904)
});
var rectangle1;
marker1.addListener('click', function(evt) {
if (rectangle1 && rectangle1.setMap) {
rectangle1.setMap(null);
rectangle1 = null;
console.log("marker 1 clicked, setMap(null)");
} else {
rectangle1 = new google.maps.Rectangle({
map: map,
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(37.778261, 126.98140242),
new google.maps.LatLng(36.255123, 128.0))
});
console.log("marker 1 clicked, create Rectangle");
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
这篇关于从地图中删除矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
