从谷歌地图之外的外部链接打开 infoWindows [英] Open infoWindows from an external link outside of the google map
问题描述
我目前正在使用 Google Maps API 创建一个属性地图.我通过自定义帖子类型来控制它，该类型将标记带入地图，并在单击它们时打开 infoWindows.
我现在需要实现某种方式来列出地图下方的属性(最终显示在滑块中)，以便在地图外单击该属性时，地图会平移到标记并打开信息窗口.
目前我根本无法让它工作 - 我不是一个非常强大的 javascript 编码员，所以任何帮助将不胜感激.
我目前在地图下方有一个帖子类型条目列表，但无法链接它们..
这是迄今为止地图的代码片段..
/* 标记 1 */函数 add_marker( $marker, map ) {//变量var image = 'http://www.masonyoung.co.uk/wp-content/uploads/2015/08/mason-new.png';var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );//创建标记var 标记 = 新的 google.maps.Marker({位置 : latlng,地图:地图，图标:图像});//添加到数组map.markers.push( 标记);//如果标记包含 HTML，则将其添加到 infoWindow如果( $marker.html() ){//创建信息窗口var infowindow = new google.maps.InfoWindow({内容:$marker.html()});//点击标记时显示信息窗口google.maps.event.addListener(marker, 'mouseover', function() {if($('.gm-style-iw').length) {$('.gm-style-iw').parent().hide();}infowindow.open(地图，标记)；});google.maps.event.addListener(marker, "mouseout", function() {标记.setAnimation(空)；});}}这是我迄今为止的地图下方属性列表的代码..
'特性'，'posts_per_page' =>-1) );?><?php foreach($maps as $map): ?><?php$location = get_field('location',$map->ID);$price = get_field('price',$map->ID);$squareft = get_field('sq_ft_total',$map->ID);$buylet = get_field('to_buy_or_to_let',$map2->ID);$link = the_permalink($map->ID);?><div id="map_list"><ul id="地图位置"><li data-lat="<?php echo $location['lat']; ?>"data-lng="<?php echo $location['lng']; ?>"><h3><a href="<?php echo post_permalink( $map ); ?>"><?php echo $location['address'];?></a></h3><?php endforeach;?>
最简单的方法是将每个标记添加到一个标记数组中.然后为每个标记创建一个链接，其中包含对标记的标记索引的引用，这样您就可以在点击外部链接时触发标记本身的点击事件.
函数初始化(){var 标记 = new Array();var mapOptions = {变焦:5，mapTypeId: google.maps.MapTypeId.ROADMAP,中心:新 google.maps.LatLng(1, 1)};变量位置 = [[新的 google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'],[新的 google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'],[新的 google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'],[新的 google.maps.LatLng(1, 0), 'Marker 4', 'Infowindow content for Marker 4'],[新的 google.maps.LatLng(1, 1), 'Marker 5', 'Marker 5 的信息窗口内容'],[新的 google.maps.LatLng(1, 2), 'Marker 6', 'Marker 6 的信息窗口内容']];var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);var infowindow = new google.maps.InfoWindow();for (var i = 0; i ' + location[i][1] + '</a>');var 标记 = 新的 google.maps.Marker({位置:位置[i][0]，地图:地图，标题:地点[i][1]，});//在标记上注册一个点击事件监听器来显示对应的信息窗口内容google.maps.event.addListener(marker, 'click', (function (marker, i) {返回函数(){infowindow.setContent(locations[i][2]);infowindow.open(地图，标记)；}})(标记, i));//将标记添加到标记数组标记.推(标记)；}//当相应的标记链接被点击时，在每个标记上触发一个点击事件$('.marker-link').on('click', function () {google.maps.event.trigger(markers[$(this).data('markerid')],'click');});}初始化(); I'm currently working with the Google Maps API to create a property map. I have it controlled through a Custom Post type which brings in the markers onto the map with infoWindows which open when they're clicked.
I now need to implement some kind of way to list the properties (eventually into a slider) beneath the map so that when the property is clicked outside of the map the map pans to the marker and opens the infoWindow.
At the moment I can't get it to work at all - I'm not a very strong javascript coder so any help would be much appreciated.
I have a list of the post type entries below the map at the moment but no way of linking them..
Here's a snippet of the code so far for the map..
/* MARKER 1 */
function add_marker( $marker, map ) {
// var
var image = 'http://www.masonyoung.co.uk/wp-content/uploads/2015/08/mason-new.png';
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
// create marker
var marker = new google.maps.Marker
({
position : latlng,
map : map,
icon: image
});
// add to array
map.markers.push( marker );
// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'mouseover', function() {
if($('.gm-style-iw').length) {
$('.gm-style-iw').parent().hide();
}
infowindow.open( map, marker );
});
google.maps.event.addListener(marker, "mouseout", function() {
marker.setAnimation(null);
});
}
}
And this is the code I have so far for the list of properties beneath the map..
<?php
$maps = get_posts( array(
'post_type' => 'properties',
'posts_per_page' => -1
) );?>
<?php foreach($maps as $map): ?>
<?php
$location = get_field('location',$map->ID);
$price = get_field('price',$map->ID);
$squareft = get_field('sq_ft_total',$map->ID);
$buylet = get_field('to_buy_or_to_let',$map2->ID);
$link = the_permalink($map->ID);
?>
<div id="map_list">
<ul id="map-locations">
<li data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
<h3><a href="<?php echo post_permalink( $map ); ?>"><?php echo $location['address']; ?></a></h3>
</li>
</ul>
</div>
<?php endforeach; ?>
The easiest way would be to add each marker to a markers array. Then create a link for each marker which contains a reference to the markers index of your marker, this way you can trigger a click event on the marker itself when clicking your external link.
function initialize() {
var markers = new Array();
var mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(1, 1)
};
var locations = [
[new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'],
[new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'],
[new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'],
[new google.maps.LatLng(1, 0), 'Marker 4', 'Infowindow content for Marker 4'],
[new google.maps.LatLng(1, 1), 'Marker 5', 'Infowindow content for Marker 5'],
[new google.maps.LatLng(1, 2), 'Marker 6', 'Infowindow content for Marker 6']
];
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var infowindow = new google.maps.InfoWindow();
for (var i = 0; i < locations.length; i++) {
// Append a link to the markers DIV for each marker
$('#markers').append('<a class="marker-link" data-markerid="' + i + '" href="#">' + locations[i][1] + '</a> ');
var marker = new google.maps.Marker({
position: locations[i][0],
map: map,
title: locations[i][1],
});
// Register a click event listener on the marker to display the corresponding infowindow content
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][2]);
infowindow.open(map, marker);
}
})(marker, i));
// Add marker to markers array
markers.push(marker);
}
// Trigger a click event on each marker when the corresponding marker link is clicked
$('.marker-link').on('click', function () {
google.maps.event.trigger(markers[$(this).data('markerid')], 'click');
});
}
initialize();
这篇关于从谷歌地图之外的外部链接打开 infoWindows的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
