- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试将 javascript 变量传递给 addDomListener 以触发 googlemaps 函数。
如果我写:
var name=a1;
google.maps.event.addDomListener(name, 'mouseover', function() {
有效。
但是如果我写:
var i=1;
var name="a"+i;
google.maps.event.addDomListener(name, 'mouseover', function() {
它不起作用。但是:
alert(name)
给我
a1
在这两种情况下。
我不知道是什么问题!
如有任何帮助,我们将不胜感激。
编辑
好的,更多细节:
我正在生成多个 div 名称,每个名称对应一个不同的事件。这是 HTML/PHP:
<?php
$i=0;
foreach ($key as $name)
{ ?>
<div class="row">
<ul class="event-list">
<li >
<img "src="images/image.jpg" />
<div id="a<?=$i?>" style="min-height: 120px;min-width: 120px;" class="info">
<h2 class="title"><?= $name ?></h2>
</li>
</ul>
</div>
<?php $i++; } ?>
例如我有 div:a0、a1、a2、a3、a4、a5
将鼠标悬停在这些 div 上必须修改 google-maps 上相关标记的图标颜色。这是脚本:
<script type="text/javascript">
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(<?= json_encode($lat); ?>, <?= json_encode($lng);?>),
zoom: <?php echo json_encode(13); ?>,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("map_controller.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
//var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
var marker = new google.maps.Marker({
map: map,
position: point,
icon: image
});
hover(marker,i);
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function hover(marker,i){
var name=a0; //ok
//var name="a"+i; //doesnt work in addDomListener
alert(name);
google.maps.event.addDomListener(name, 'mouseover', function() {
marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png');
return i;
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
</script>
最佳答案
也许这与问题的真正含义相去甚远,但我还是会试一试:您不能将 DomListeners 附加到字符串,您可以将监听器附加到实例(如 map
)或 DOM 元素引用。
如果你有一个标记,你可以用各种变量丰富那个标记:
var marker = new google.maps.Marker({
position : new google.maps.LatLng(56.05, 10.4),
map : map,
someVariable : 'hello'
});
然后在事件发生时检索这些变量:
google.maps.event.addDomListener(marker, 'mouseover', function() {
alert(this.someVariable)
});
一个小演示 -> http://jsfiddle.net/zvfqd04q/
更新。如上所述,您不能将处理程序附加到字符串。在更新的问题中看到您的代码后,我可以看到您不需要谷歌地图 addDomListener
任何一个。只需附上 native onmouseover
a+n <div>
的事件处理程序(或类似的)元素。
带有一些 <div>
的示例的和修改后的 hover()
功能。每个<div>
绑定(bind)到 marker
如果将鼠标悬停在相应的 <div>
上,则会更改哪个图标或将鼠标移离 <div>
:
function hover(marker, i){
document.getElementById('a'+i).onmouseover = function() {
marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png');
}
document.getElementById('a'+i).onmouseleave = function() {
marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_blue.png');
}
}
如您的代码所示:
var marker = new google.maps.Marker({
map: map,
position: point,
icon: image
});
hover(marker,i);
关于javascript - 将 javascript 变量添加到 addDomListener,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32711932/
我正在使用此代码加载谷歌地图。 function initialize() { // Map initialization } google.maps.event.addDomListen
Google maps v3 api suggest使用 addDomListener() 方法加载初始化函数,而不是将其附加到 body 标签。 function initialize() {
我正在尝试将 javascript 变量传递给 addDomListener 以触发 googlemaps 函数。 如果我写: var name=a1; google.maps.eve
我觉得这是一段相当简单的代码,在 iframe 中运行的代码被用作 Google Map 文档中的示例代码,因此它与 iframe 有关,但我不确定。 简而言之,我正在创建一个 iframe,将 Go
我正在使用 GoogleMaps API 进行一些工作,并创建了一个模块来保存一些自定义函数: myFuncs = { doStuff: function() { console.log
我通过在 php 中查询数据库,然后将数据发送到 addMarker 函数,为 googlemap 构建了标记。 对于每个标记,都有 0 到未知数量的“违规”。我已将每个标记的违规放入一个数组(称为违
我正在尝试将here-api map 集成到我的rails 5 应用程序中。一些背景我过去成功地完成了类(class)后,使用谷歌地图开发了一个类似的应用程序页面。使用here-api作为替代方案,因
我只想根据不同 div 元素的 Mouseover 事件加载 Google map 。为此,我只使用了以下简单的代码。这段代码本身不起作用,有人可以告诉我我犯了什么错误吗? function i
我在使用 google map api v2 时遇到一些问题。我想要的是能够将鼠标悬停在工具提示上。 下面是我的代码。在firefox中可以工作,但我必须非常轻轻地在工具提示上移动鼠标,如果我快速移动
我有以下简单的脚本: var fruits = new Array("apple","orange","lemon"); $("#fruit_canvas").append("Mouse over t
我有一个简单的谷歌地图示例JS文件: /*Standard Setup Google Map*/ var latlng = new google.maps.LatLng(-25.363
我正在尝试使用 Google map 。我找到了这个声明。 google.maps.event.addDomListener(window, 'load', initialize); 该语句的作用是什
这段代码有问题。在 div 上鼠标按下后, map 在 Firefox 上并没有立即变为“不可拖动”,但在 Chrome 上是可以的。 google.maps.event.addDomListen
这个问题在这里已经有了答案: What is the function of google.maps.event.addDomListener(window, 'load', initialize)
我正在尝试添加 Google 位置自动建议,我从开发人员的网站上复制了代码进行尝试,但出现错误: google.maps.event.addDomListener() 已弃用,请改用标准 addEve
我是一名优秀的程序员,十分优秀!