Javascript GoogleMap：计算每种类型的标记数量，并在添加新标记时立即更新结果
我有这段代码，允许我通过拖放将不同类型的标记添加到地图上Javascript GoogleMap：计算每种类型的标记数量，并在添加新标记时立即更新结果,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我有这段代码，允许我通过拖放将不同类型的标记添加到地图上 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>TEST1</title> <style type="text/css"> *{
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TEST1</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
html { height: 100% }
body{ height: 100%; margin: 0px; padding: 0px;}
#map_canvas { height: 80% ; width:70%;clear:none}
#shelf{position:relative; top:10px; height:20%;width:100%;background:white;opacity:0.7;}
#draggable {position:absolute; top:15px;left:50px; width: 30px; height: 50px;z-index:1000000000;}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#draggable1").draggable({helper: 'clone',
stop: function(e,ui) {
var mOffset=$($map.getDiv()).offset();
var point=new google.maps.Point(
ui.offset.left-mOffset.left+(ui.helper.width()/2),
ui.offset.top-mOffset.top+(ui.helper.height())
);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
var icon = $(this).attr('src');
placeMarker(ll, icon);
}
});
$("#draggable2").draggable({helper: 'clone',
stop: function(e,ui) {
var mOffset=$($map.getDiv()).offset();
var point=new google.maps.Point(
ui.offset.left-mOffset.left+(ui.helper.width()/2),
ui.offset.top-mOffset.top+(ui.helper.height())
);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
var icon = $(this).attr('src');
placeMarker(ll, icon);
}
});
});
</script>
<script type="text/javascript">
var $map;
var $latlng;
var overlay;
function initialize() {
var $latlng = new google.maps.LatLng(50.5833, 5.8667);
var myOptions = {
zoom: 18,
center: $latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_LEFT },
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_TOP
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: false,
panControl:false,
};
$map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap($map);
}
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: $map,
draggable: true,
icon: icon
});
}
function countMarkers(markers) {
var count = 0;
$.each(markers, function (i, marker) {
console.log(marker.visible);
if (marker.visible == true) {
count++;
}
});
$('#countBox').val(count);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div id='shelf'>
<img src="spring-hot.png" id="draggable1" />Total : X<br><img src="spring-cold.png" id="draggable2" />Total : Y
</div>
</body>
</html>
测试1
*{
边际：0px；
填充：0px；
}
html{高度：100%}
正文{高度：100%；边距：0px；填充：0px；}
#地图画布{高度：80%；宽度：70%；清除：无}
#搁板{位置：相对；顶部：10px；高度：20%；宽度：100%；背景：白色；不透明度：0.7；}
#可拖动{位置：绝对；顶部：15px；左侧：50px；宽度：30px；高度：50px；z索引：100000000；}
$（文档）.ready（函数（）{
$（“#draggable1”）.draggable（{helper:'clone'，
停止：功能（e、ui）{
var mOffset=$（$map.getDiv（））.offset（）；
var point=new google.maps.point(
ui.offset.left mOffset.left+（ui.helper.width（）/2），
ui.offset.top mOffset.top+（ui.helper.height（））
);
var ll=overlay.getProjection（）.fromContainerPixelToLatLng（点）；
var icon=$（this.attr（'src'）；
placeMarker（ll，图标）；
}
});
$（“#draggable2”）.draggable（{helper:'clone'，
停止：功能（e、ui）{
var mOffset=$（$map.getDiv（））.offset（）；
var point=new google.maps.point(
ui.offset.left mOffset.left+（ui.helper.width（）/2），
ui.offset.top mOffset.top+（ui.helper.height（））
);
var ll=overlay.getProjection（）.fromContainerPixelToLatLng（点）；
var icon=$（this.attr（'src'）；
placeMarker（ll，图标）；
}
});
});
var$map；
var$latlng；
var叠加；
函数初始化（）{
var$latlng=新的google.maps.latlng（50.5833,5.8667）；
变量myOptions={
缩放：18，
中心：$latlng，
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.DROPDOWN_菜单，
位置：google.maps.ControlPosition.TOP_LEFT}，
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.LARGE，
位置：google.maps.ControlPosition.LEFT_TOP
},
scaleControl：对，
规模控制：{
位置：google.maps.ControlPosition.TOP_左
},
街景控制：错误，
泛控制：错误，
};
$map=new google.maps.map（document.getElementById（“map_canvas”），
肌肽）；
overlay=新的google.maps.OverlayView（）；
overlay.draw=函数（）{}；
setMap（$map）；
}
功能位置标记（位置、图标）{
var marker=new google.maps.marker({
位置:位置,，
地图：$map，
真的，
图标：图标
});
}
函数计数标记（标记）{
var计数=0；
$。每个（标记，功能（i，标记）{
console.log（marker.visible）；
如果（marker.visible==true）{
计数++；
}
});
$（'#countBox'）.val（count）；
}
总计：X
总计：Y
你能帮我吗？试着保留两个数组，每种类型的标记一个（例如var-markerType1=[]；markerType2=[]`）。然后，不只是调用placeMarker函数，而是通过执行markerType1.push（placeMarker（ll，icon））将新标记推入适当的数组 然后更改placeMarker函数以返回新标记，如下所示
return new google.maps.Marker({
position: location,
map: $map,
draggable: true,
icon: icon
});
markerType1.length
到目前为止，您尝试了哪些方法来找到标记的数量？谢谢您的回答，但不幸的是我不明白。。。我只是一个初学者，我甚至不知道什么是数组。。。我通过编译我在网上找到的不同代码片段来编写这段代码，但我还不够专业。。。所以我想在尝试之前我应该学习更多关于javascript的知识。。。