如何使用叠加层在Google地图上显示或隐藏标记？ [英] How can I show or hide markers on Google maps using overlays?

问题描述

在我的代码中包含超过90个标记，通过点击每个标记一个图像将基于信息窗口打开仍然这个代码完成，但我的要求是当我选中复选框时在谷歌地图上放置一个复选框控件所有标记都可见，取消选中所有标记都是使用叠加概念不可见。请告诉我有关显示/隐藏标记的任何想法吗？

以下是我的代码包含标记

In my code consists of more than 90 markers,by click on each marker one Image will be opened based on info window still this code was completed, But my requirement is to place a checkBox control on google maps when I Check on checkbox all markers are visible,uncheck all markers are invisible using overlays concept. Please give me any idea about show/hide markers?
below is my code consists markers

var map;

var markers = [];



函数initmap（）{

map = new google.maps.Map（document.getElementById（dvMap），{

zoom：7，

center：{lat：4.542500，lng：101.140999}，

mapTypeId：google.maps.MapTypeId.ROADMAP，

streetViewControl：false

}）;





函数CenterControl（controlDiv，map）{

< br $>


//设置控件边框的CSS。

var controlUI = document.createElement（'div'）;

controlUI.style.backgro undColor ='＃ff';

controlUI.style.border ='2px solid #fff';

controlUI.style.borderRadius ='3px';

controlUI.style.paddingLeft ='5px';



controlUI.style.boxShadow ='0 2px 6px rgba（0,0,0，.3 ）';

controlUI.style.cursor ='指针';

controlUI.style.marginBottom = '22px';

controlUI.style .textAlign ='center';





controlUI.title ='标记';

controlDiv.appendChild （controlUI）;

var controlText = document.createElement（'div'）;

controlText.style.color ='rgb（25,25,25）';

controlText.style.fontFamily ='Roboto，Arial，sans-serif';

controlText.style.fontSize ='12px';

contr olText.style.lineHeight = '26px';

controlText.style.paddingLeft ='5px';

controlText.style.paddingRight ='5px';



controlUI.appendChild（controlText）;



var checkbox = document.createElement（'input'）;

checkbox.type =复选框;

checkbox.name =name;

checkbox.value =value;

checkbox.id =chkimages;

//checkbox.checked = true;



var label = document.createElement（ 'label'）

label.htmlFor =lblimg;

label.appendChild（document.createTextNode（'Markers'））;

controlUI.appendChild（checkbox）;

controlUI.appendChild（label）;

}



$（docume nt）.ready（function（）{



$ .ajax（{

type：POST，

contentType：application / json; charset = utf-8，

url：QMapImages.aspx / GetCctvData，

data：{}，

dataType： json，

成功：函数（数据）{

for（var j = 0; j& lt; data.d.length; j ++）{

var marker = {

title：data.d [j] .Name，

lat：data.d [j] .Lat，

lng：data.d [j] .Lng，

id：data.d [j] .Id

};

markers.push（marker）;



}

markers = JSON.parse（markers）;

}，

错误：函数（结果）{

alert（data.d [i] .Name）;

}

}）;



setTimeout（checkboxcheck，1000）;

function checkboxcheck（）{

$（'输入[type =checkbox]'）。click（function（）{

if（$（this）.prop（checked）== true）{

setMapOnAll（map）;

}

else if（$（this）.prop（checked）== false）{

markers = [];



}

}）;

}

function setMapOnAll（map）{

var infoWindow = new google.maps.InfoWindow（）;

for（var i = 0;我& lt; markers.length; i ++）{



var data = markers [i];

var myLatlng = new google.maps.LatLng（data.lat，data .lng）;

var marker = new google.maps.Marker（{

position：myLatlng，

map：map，

title：data.title，

icon：'http：//plustrafik.plus.com.my/images/LiveTrafficPage/16 x 16 / CCTV.png'

}）;

//将点击事件附加到标记。

（功能（标记，数据）{

google。 maps.event.addListener（marker，click，function（e）{

//将内容包装在HTML DIV中以设置InfoWindow的高度和宽度。

infoWindow.setContent（< div style ='width：280px; height：220px;'>+& lt; img src = GettingImages.aspx？id =+ data.id +>+< / div>）;

infoWindow.open（地图，标记）;

}）;

}）（标记，数据）;

}

}



}）;





var centerControlDiv = document.createElement（'div'）;

var centerControl = new CenterControl（centerControlDiv，map）;



centerControlDiv.index = 1;

map.controls [google.maps.ControlPosition.LEFT_TOP] .push（centerControlDiv）;

centerControlDiv.style ['padding-left '] ='10px';

}









我尝试了什么：



请给我这个例子的任何解决方案？

var map;
var markers=[];

function initmap() {
map = new google.maps.Map(document.getElementById("dvMap"), {
zoom: 7,
center: { lat: 4.542500, lng: 101.140999 },
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
});


function CenterControl(controlDiv, map) {


// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '3px';
controlUI.style.paddingLeft = '5px';

controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';


controlUI.title = 'Markers';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.lineHeight = '26px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';

controlUI.appendChild(controlText);

var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = "value";
checkbox.id = "chkimages";
//checkbox.checked = true;

var label = document.createElement('label')
label.htmlFor = "lblimg";
label.appendChild(document.createTextNode('Markers'));
controlUI.appendChild(checkbox);
controlUI.appendChild(label);
}

$(document).ready(function () {

$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "QMapImages.aspx/GetCctvData",
data: "{}",
dataType: "json",
success: function (data) {
for (var j = 0; j &lt; data.d.length; j++) {
var marker = {
title: data.d[j].Name,
lat: data.d[j].Lat,
lng: data.d[j].Lng,
id: data.d[j].Id
};
markers.push(marker);

}
markers = JSON.parse(markers);
},
error: function (result) {
alert(data.d[i].Name);
}
});

setTimeout(checkboxcheck, 1000);
function checkboxcheck() {
$('input[type="checkbox"]').click(function () {
if ($(this).prop("checked") == true) {
setMapOnAll(map);
}
else if ($(this).prop("checked") == false) {
markers = [];

}
});
}
function setMapOnAll(map) {
var infoWindow = new google.maps.InfoWindow();
for (var i = 0; i &lt; markers.length; i++) {

var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
icon: 'http://plustrafik.plus.com.my/images/LiveTrafficPage/16 x 16/CCTV.png'
});
//Attach click event to the marker.
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
//Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
infoWindow.setContent("<div style = 'width:280px;height:220px;'>" + "&lt;img src=GettingImages.aspx?id=" + data.id + ">" + "</div>");
infoWindow.open(map, marker);
});
})(marker, data);
}
}

});


var centerControlDiv = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, map);

centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.LEFT_TOP].push(centerControlDiv);
centerControlDiv.style['padding-left'] = '10px';
}




What I have tried:

Please give me any solution for this example?

解决方案

（document）.ready（function（）{

(document).ready(function () {

.ajax（{

类型：POST，

contentType：application / json; charset = utf-8，

url：QMapImages.aspx / GetCctvData，

data：{}，

dataType： json，

成功：函数（数据）{

for（var j = 0; j& lt; data.d.length; j ++）{

var marker = {

title：data.d [j] .Name，

lat：data.d [j] .Lat，

lng：data.d [j] .Lng，

id：data.d [j] .Id

};

markers.push（marker）;



}

markers = JSON.parse（markers）;

}，

错误：函数（结果）{

alert（data.d [i] .Name）;

}

}）;



setTimeout（checkboxcheck，1000）;

function checkboxcheck（）{

.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "QMapImages.aspx/GetCctvData",
data: "{}",
dataType: "json",
success: function (data) {
for (var j = 0; j &lt; data.d.length; j++) {
var marker = {
title: data.d[j].Name,
lat: data.d[j].Lat,
lng: data.d[j].Lng,
id: data.d[j].Id
};
markers.push(marker);

}
markers = JSON.parse(markers);
},
error: function (result) {
alert(data.d[i].Name);
}
});

setTimeout(checkboxcheck, 1000);
function checkboxcheck() {

（'input [type =checkbox]'）。点击（function（）{

if（

('input[type="checkbox"]').click(function () {
if (

这篇关于如何使用叠加层在Google地图上显示或隐藏标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！