GMAPS API事件处理引脚点
GMAPS API event handling for pin points
我有一个gmaps的api,我有一些标记,当一个特定的标记被点击,我希望它更新一些html以外的api,现在我可以做到这一点没有问题,如果它只是一个常规的事情,但脚本的方式是它是面向对象的,没有办法我可以检查标记,说当x被点击更新innerhtml的y等…
var map;
/*array for locations below */
var locations = [
['<h4>Kingsley Recruitment Liverpool <br/><br/> 11th Floor, The Plaza<br/> 100 Old Hall Street <br/> Liverpool <br/> L3 9QJ <br/> <br/> 0151 242 1630</h4>', 53.4109146,-2.9947334999999384],
['<h4>Kingsley Recruitment Manchester <br/><br/> Centurion House<br/>129 Deansgate<br/>Manchester<br/>M3 3WR <br/> <br/> 0161 393 9889 </h4>', 53.479798 , -2.2479048],
['<h4>Kingsley Recruitment London <br><br> Warnford Court <br> 29 Throgmorton Street<br> London <br> EC2N 2AT <br><br> 0203 817 7030</h4>', 51.5074, 0.1278],
['<h4>Kingsley Recruitment Birmingham <br><br> Cornwall Buildings <br> 45 Newhall Street <br> Birmingham <br> B3 3QR <br><br> 0121 796 8460</h4>', 52.48208, -1.9027578],
['<h4>Kingsley Recruitment Leeds <br><br> West One <br> Wellington Street<br>Leeds<br>LS1 1BA <br><br>0113 887 2170 </h4>', 53.8008 , -1.5491]
];
// Setup the different icons and shadows
var iconURLPrefix = 'https://www.google.com/intl/en_ALL/mapfiles/';
var icons = [
iconURLPrefix + 'marker_black.png',
]
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
var iconsLength = icons.length;
var map = new google.maps.Map(document.getElementById('MAPS'), {
zoom: 6,
center: new google.maps.LatLng(52.6369, -1.1398),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: true,
scrollwheel:false,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
}
});
var infowindow = new google.maps.InfoWindow({
maxWidth: 160
});
var markers = new Array();
var iconCounter = 0;
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2],locations[i][3],locations[i][4]),
map: map,
icon: icons[iconCounter]
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
iconCounter++;
if(iconCounter >= iconsLength) {
iconCounter = 0;
}
}
function autoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
for (var i = 0; i < markers.length; i++) {
bounds.extend(markers[i].position);
}
// Fit these bounds to the map
map.fitBounds(bounds);
}
autoCenter();
我想让它更新
下面的li内部HTML <div class = "contact-icons">
<ul>
<div class = "indiv-icons">
<img src = "images/call-icon.PNG"/> <li>CALL US <br/> +333 333 333 </li>
</div>
<div class = "indiv-icons">
<img src = "images/address-icon.PNG"/> <li>ADDRESS<br/> 1234 Quigley Street</li>
</div>
<div class = "indiv-icons">
<img src = "images/message-icon.PNG"/> <li>EMAIL<br/> support@yourcompany.com</li>
</div>
</ul>
</div>
</div>
对我来说这似乎是一个复杂的任务这就是为什么我把它放在这个网站上它是自我的所以你可以看到它是http://79.170.40.182/kingsley-test.co.uk/kingsley%209.9.2016/kingsley-new/contact.php
当你点击一个标记时,你希望它调用什么函数?您只希望向一个标记添加事件还是向所有标记添加事件?
如果是所有标记,只需添加
nameOfYourFunction(marker)
就在
后面 google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
相关文章:
- keyup事件处理程序更改焦点不适用于快速键入
- 提示使用服务器端事件处理程序激活JavaScript
- 将事件处理程序绑定到任何可能的事件
- 正在将事件处理程序添加到不存在的类
- dropdown.js中的复杂事件处理
- 在循环中附加事件处理程序时出现浏览器性能问题
- 在同一个javascript事件处理程序中调用不同的函数
- 复选框,然后单击事件处理
- 有没有一种方法可以让内联事件处理程序在元素创建后立即执行
- 检查事件处理程序参数
- 实现延迟的jquery更改事件处理程序
- 如何使用Node.js在JavaScript模块文件之间使用事件处理程序
- 如何使jQuery的“bind”或“on”事件处理程序幂等
- 带有参数的Javascript事件处理程序
- Jquery事件处理程序仅适用于匿名函数
- 如何从另一个处理程序内部取消JavaScript事件处理程序函数的执行
- 如何在 JavaScript 代码中调试点击事件处理
- Twitter 引导弹出窗口 :如何在不使用正文/文档事件处理程序的情况下在外面单击时隐藏它
- Bing Maps v7-多边形会阻止多边形内(后面)显示的引脚的鼠标悬停事件
- GMAPS API事件处理引脚点