- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试将markerclusterplus.js 与Google map API v3 一起使用。我正在循环访问一系列地址,对每个地址进行地理编码并添加标记和信息窗口。我将标记推送到一个名为标记的数组,并使用以下代码将它们添加到我的集群中
var markerCluster = new MarkerClusterer( map , 标记);
没有显示聚集标记。其余代码有效,如果我添加
map: map
对于我的标记来说,它们显示为标准标记,所以这一切都很好。当使用警告标记数组时
alert(markers.toString())
没有返回任何内容,因此可能没有任何内容被推送到数组中?
完整代码如下
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&ver=3.5.1"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
</head>
<body>
<script type="text/javascript">
var map; //Map variable
var geocoder; //Geocoder variable
var infowindow;
//var marker; //Marker variable
//Options variable
var myOptions = {
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
};
var LatLngList = [];
//Geocoder function
function myGeocode() {
infowindow = new google.maps.InfoWindow({
maxWidth: 200
});
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder = new google.maps.Geocoder();
var titles = ['Anne of Cleves House',
'Lewes Castle',
'Michelham Priory',
'Fishbourne Roman Palace & Gardens',
'Marlipins Museum','The Priest House',
'The Long Man'
];
var addresses =[
'Anne of Cleves House, 52, Southover High St, Lewes, BN7 1JA',
'Barbican House Museum, 169, High Street, Lewes, BN7 1YE',
'Michelham Priory, Upper Dicker, Hailsham, East Sussex, BN27 3QS',
'Fishbourne Roman Palace, Roman Way, Fishbourne, West Sussex, PO19 3QR',
'Marlipins Museum, High Street, Shoreham-by-Sea, West Sussex, BN43 5DA',
'The Priest House, North Lane, West Hoathly, West Sussex, RH19 4PP',
'The long man of wilmington'
];
var descriptions = [
'Anne of Cleves House you can explore how the Tudors and Elizabethans lived, worked and relaxed at home.',
'Climb to the top of this 1000 year old Norman Castle for stunning panoramic views across Sussex.',
'England\'s longest water filled moat surrounds the site which dates back to 1229.',
'Welcome to the largest Roman home in Britain',
'The striking chequerboard flint and Caen limestone facade is part of one of the oldest Norman buildings in Sussex.',
'The only one of its kind open to the public, this beautiful 15th century Wealden hall house stands in a traditional cottage garden.',
'the long man of wilmington'
];
for (var i = 0; i < addresses.length; i++) {
var address = addresses[i];
var title = titles[i];
var description = descriptions[i];
//var alink = links[i];
var markers = [];
var marker;
(function(address, title, description) {
geocoder.geocode( {"address": address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latlng = results[0].geometry.location;
LatLngList.push(latlng);
map.setCenter(latlng);
marker = new google.maps.Marker({
position: latlng
//map: map,
//title: title,
});
markers.push(marker);
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent("<div class='map-infowindow'><h4 class='gm-title'>"+title+"</h4>"+description+"'<a class='gm-directions' href='http://maps.google.com/maps?saddr="+address+"'>Get directions</a></div>");
infowindow.open(map, marker);
});
}
else {
document.getElementById("text_status").value = status;
}
});//end of geocoder
})(address, title, description); // <- Call function, pass the vars to be captured
}//end of for loop
alert(markers.toString())
var markerCluster = new MarkerClusterer(map, markers);
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds ();
// Go through each...
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
// And increase the bounds to take this point
bounds.extend (LatLngList[i]);
}
// Fit these bounds to the map
map.fitBounds (bounds);
//alert(LatLngList.join('\n'))
}
window.onload=myGeocode;
</script>
<div id="map_canvas" style="width:600px; height:600px;"></div>
</body>
</html>
最佳答案
首先,每次在循环内重新定义标记数组,必须在循环外部定义标记数组。
其次,geocoder.geocode 异步工作,因此地理编码实际上直到循环结束后才完成,甚至在您的alert() 调用之后才完成。
第三,没有必要在循环中使用闭包,因为每次循环都需要重新定义函数。在这种情况下,我总是喜欢在当前函数中添加私有(private)方法。因此,执行地理编码调用的函数仅定义一次并根据需要调用。现在我们需要做的就是(从地理编码器的回调函数中)观察标记数组的长度增长,直到它与地址数组的长度相同,然后我们知道所有地理编码已经完成(当然假设一切顺利),完成事情的时间:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&ver=3.5.1"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
</head>
<body>
<script type="text/javascript">
var map; //Map variable
var geocoder; //Geocoder variable
var infowindow;
//var marker; //Marker variable
//Options variable
var myOptions = {
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
};
var LatLngList = [];
//Geocoder function
function myGeocode() {
infowindow = new google.maps.InfoWindow({
maxWidth: 200
});
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder = new google.maps.Geocoder();
var titles = [
'Anne of Cleves House',
'Lewes Castle',
'Michelham Priory',
'Fishbourne Roman Palace & Gardens',
'Marlipins Museum','The Priest House',
'The Long Man'
];
var addresses =[
'Anne of Cleves House, 52, Southover High St, Lewes, BN7 1JA',
'Barbican House Museum, 169, High Street, Lewes, BN7 1YE',
'Michelham Priory, Upper Dicker, Hailsham, East Sussex, BN27 3QS',
'Fishbourne Roman Palace, Roman Way, Fishbourne, West Sussex, PO19 3QR',
'Marlipins Museum, High Street, Shoreham-by-Sea, West Sussex, BN43 5DA',
'The Priest House, North Lane, West Hoathly, West Sussex, RH19 4PP',
'The long man of wilmington'
];
var descriptions = [
'Anne of Cleves House you can explore how the Tudors and Elizabethans lived, worked and relaxed at home.',
'Climb to the top of this 1000 year old Norman Castle for stunning panoramic views across Sussex.',
'England\'s longest water filled moat surrounds the site which dates back to 1229.',
'Welcome to the largest Roman home in Britain',
'The striking chequerboard flint and Caen limestone facade is part of one of the oldest Norman buildings in Sussex.',
'The only one of its kind open to the public, this beautiful 15th century Wealden hall house stands in a traditional cottage garden.',
'the long man of wilmington'
];
var markers = [];
//private function, only need be defined once!
function getGeocode(address, title, description) {
geocoder.geocode( {"address": address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latlng = results[0].geometry.location;
LatLngList.push(latlng);
map.setCenter(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map
//title: title,
});
markers.push(marker);
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent("<div class='map-infowindow'><h4 class='gm-title'>"+title+"</h4>"+description+"'<a class='gm-directions' href='http://maps.google.com/maps?saddr="+address+"'>Get directions</a></div>");
infowindow.open(map, marker);
});
if (markers.length == addresses.length) { //we have received all of our geocoder responses
alert(markers);
var markerCluster = new MarkerClusterer(map, markers);
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds ();
// Go through each...
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
// And increase the bounds to take this point
bounds.extend (LatLngList[i]);
}
// Fit these bounds to the map
map.fitBounds (bounds);
}
} else {
document.getElementById("text_status").value = status;
}
});//end of geocoder
}
for (var i = 0; i < addresses.length; i++) {
var address = addresses[i];
var title = titles[i];
var description = descriptions[i];
//var alink = links[i];
//put our private function to work:
getGeocode(address, title, description);
}//end of for loop
}
window.onload=myGeocode;
</script>
<div id="map_canvas" style="width:600px; height:600px;"></div>
</body>
</html>
关于javascript - 谷歌地图聚类器没有标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16013478/
虽然我在 reactjs 组件(组件名称为 renderLocationLink)的渲染方法返回的 html 中包含了 a 标签的 onclick 处理程序,但渲染正确地发生了 onclick 处理程
我必须以 docx 格式存储一些文档,但无法忍受使用 msword:我想编辑某种纯文本标记,除了基于 XML 的东西(我也不喜欢那样)和从/到那个到/从 docx 转换。 有什么选择吗? 编辑:由于人
有一个页面,其 anchor 标记在延迟后变得可点击。我想使用用户脚本在可点击后点击它。 页面加载时,HTML 源代码为: Download 延迟一段时间后,#button 变
我正在将 XML 文件解析为 pandas 数据帧。使用下面的代码我可以成功获取所有内容,但是这使用了完整 XML 的编辑版本。完整的 XML 在主数据表之上有一堆摘要数据,请参阅完整的 XML he
目前我正在研究 xml.sax 解析器来解析 xml 文件 假设我有以下代码 filepath = 'users/file.xml' try: parser = xml.sax.make_pa
我正在尝试构建一种语法来解释用户输入的文本,搜索引擎风格。它将支持 AND、OR、NOT 和 ANDNOT bool 运算符。我几乎所有东西都在工作,但我想添加一个规则,将引用字符串之外的两个相邻关键
我遇到了 Terraform EKS 标记的问题,并且似乎没有找到可行的解决方案来在创建新集群时标记所有 VPC 子网。 提供一些上下文:我们有一个 AWS VPC,我们在其中将多个 EKS 集群部署
我是xpath的新手,对此了解不多。我知道有一种方法可以使用xpath在xml / xhtml文件中查找特定标签。就我而言,我试图找到第一个(a)链接元素。不幸的是,我的xpath字符串[// a [
我在索引页上的产品卡上遇到问题。在产品卡内部,我有 Vue 组件来渲染表单(数量和添加到购物车按钮)。当我单击“添加到购物车”按钮时,我得到了预期的结果。响应被发送到根 vue 组件,然后我看到产品已
html setMouse(true)} onMouseEnter={() => setMouse(false)} className='resume-container'> CSS .resum
我在组件中有一组枚举,如下所示: type TOption = (clVisible, clVisibleAlways, clRenderable, clEditable); TOptions
是否有出于性能考虑的javadoc标签? 人们可以想象: /** * ...other javadoc tags... * @perform Expected to run in O(n) tim
html setMouse(true)} onMouseEnter={() => setMouse(false)} className='resume-container'> CSS .resum
我有一个包含多个小子图的图。目标是当且仅当子图中的所有节点都是蓝色时,才将子图中的所有蓝色节点标记为红色。如果子图中的一个节点具有不同的颜色,绿色,那么我们将不会更改该子图中节点的颜色。 这是我正在使
我正在使用 json-ld 开发事件标记以包含在确认电子邮件中。 我的一些事件会定期重复发生。但是,最新的 Schema.org 规范不支持重复发生的事件,因此我遵循了此处提供的建议:http://l
我创建了一个插件,可以添加带有相应行号的标记。现在,这很棒,因为它现在显示在“标记” View 中。有没有办法当我双击标记上的一行时,它会转到标记指示的行? 谢谢。 最佳答案 双击“标记” View
是否有一个插件具有与 Facebook 标记类似的行为? 它的特别之处在于它具有: 在键入的单词之间自动完成 特殊输出的 html(与另一个输入字段同步) 最佳答案 您可以使用jquery提及输入pl
有没有更好的方法来读取java文件中的 token ?我目前正在使用 StringTokenizer 来分割 token 。但在大多数情况下,它的效率可能非常低,因为您必须逐个 token 地读取 t
我想知道是否有某种方法可以标记文件来识别该文件是否包含x。 考虑以下示例: 在批量转换过程中,我正在创建一个日志文件,其中列出了各个转换的成功/失败。 所以流程如下: 开始转换过程 创建名为batch
我一直在尝试模拟点击标签,但这并没有像我需要的那样工作。我的 anchor 标记看起来像这样 Download this pic 正常的 $("a").click() 或 trigger('cli
我是一名优秀的程序员,十分优秀!