Gmaps.js - 带有动态infoWindow内容的多个标记 [英] Gmaps.js - multiple markers with dynamic infoWindow content
问题描述
我一直在广泛阅读关于将动态生成的infoWindow内容添加到Google Maps API v3地图的主题，但我无法找到适用于我的地图实现的答案（我正在使用现有的脚本gmaps.js）。我对javascript和PHP的使用经验有限，所以我希望有人能指出我正确的方向。
目前，我在我用于Wordpress网站的地图上设置了我的标记。这些标记根据数据库中指定的位置坐标正确放置，但相应的infoWindow内容（地图上每个标记的建筑名称和地址）将在infoWindow的每个实例中同时显示，而不仅仅是这些是我使用的代码（以及gmaps.js脚本）：
< div id =map>< / div>
< ul class =markers>
<？php
$ markers = get_field（'locations'，$ post-> ID）;
foreach（$ markers为$ m）：？>
< li>< a data-latlng =<？php echo $ m ['location'] ['coordinates'];？> data-icon =<？php bloginfo（'template_url'）;？> / assets / img / map_icons /<？php echo $ m ['icon'];？> .png><一个>< /锂>
<？php
endforeach; ？>
< / ul>
< script>
$（function（）{
var $ body = $（'body'），
$ window = $（window）;
if （$ body.hasClass（'page-template-page_map-php'））{
var $ map = $（'＃map'）;
函数set_map_height（） {
$ map.height（$（window）.height（） - $（'＃header'）。outerHeight（））;
}
set_map_height（）;
$ window.on（'resize'，function（）{
set_map_height（）;
}）
var map = new GMaps（{
div：'#map'，
lat：49.8994，
lng：-97.1392
}）;
$ （'.markers li a'）。each（function（）{
var $ this = $（this），
latlng = $ this.data（'latlng'）。split（ '，'）;
map.addMarker（{
lat：latlng [0]，
lng：latlng [1]，
title：'Development'，
click：function（e）{
}，
infoWindow：{
content：$（＃location）。 html（）+ i
}，
icon：$ this.data（'icon'）
}）;
}）;
map.fitZoom（）;
}
}）;
< / script>
< div id =location>
<？php
$ markers = get_field（'locations'，$ post-> ID）;
foreach（$ markers为$ m）：？>
< h3><？php echo $ m ['name']; ？>< / H3>
< p><？php echo $ m ['location'] ['address']; ？>< / p为H.
<？php
endforeach; ？>
< / div>
非常感谢您的帮助，如果我没有提供足够的细节， p>
您获取信息窗口中所有数据的原因是因为您从位置div拉取了HTML。当你循环使用标记列表时，这个div会被填入所有的数据。
最快捷的方法就是加入
< ul class =markers这个名称和地址字段是您的列表中的顶部标记。 >
<？php
$ markers = get_field（'locations'，$ post-> ID）;
foreach（$ markers为$ m）：？>
< li>< a data-latlng =<？php echo $ m ['location'] ['coordinates'];？> data-icon =<？php bloginfo（'template_url'）;？> / assets / img / map_icons /<？php echo $ m ['icon'];？> .pngdata-name = <？php echo $ m ['name'];？> data-address =<？php echo $ m ['location'] ['address'];？>>< / a>< / li>
<？php
endforeach;？>
$（'。markers li a'）然后您可以直接在JavaScript循环中设置信息窗口内容。 .each（function（）{
var $ this = $（this），
latlng = $ this.data（'latlng'）。split（'，'），
name = $ this.data（'name'），
address = $ this.data（'address'）;
map.addMarker（{
lat：latlng [ 0]，
lng：latlng [1]，
标题：'开发'，
点击：函数（e）{
}，
infoWindow：{
内容：< b>名称：< / b>+ name +< br />< b>地址：< / b>+地址
}，
图标：$ this.data（'icon'）
}）;
}）;
现在，我建议更改整个设计，以便使用AJAX调用并拥有哟您将PHP返回一组JSON数据，而不是将所有这些数据存储在DOM中。您可以使用JQuery的ajax函数和PHP json_encode / json_decode将JSON数据传入/传出Web客户端。
I've been reading extensively on the topic of adding dynamically generated infoWindow content to Google Maps API v3 maps, but I'm having trouble finding answers that work for my implementation of the map (I'm using an existing script called gmaps.js). I have limited experience with javascript and PHP, so I'm hoping someone can point me in the right direction.
Currently, I have my markers set up on a map I'm using for a Wordpress site. The markers are properly placed in accordance with the location coordinates specified in the database, but the corresponding infoWindow content (a building name and address for each marker on the map) is displaying all at once in every instance of the infoWindow, rather than only the content that pertains to each specific marker.
Here's the code I'm using (along with the gmaps.js script):
<div id="map"></div>
<ul class="markers">
<?php
$markers = get_field('locations', $post->ID);
foreach($markers as $m): ?>
<li><a data-latlng="<?php echo $m['location']['coordinates']; ?>" data-icon="<?php bloginfo('template_url'); ?>/assets/img/map_icons/<?php echo $m['icon']; ?>.png"></a></li>
<?php
endforeach; ?>
</ul>
<script>
$(function() {
var $body = $('body'),
$window = $(window);
if($body.hasClass('page-template-page_map-php')){
var $map = $('#map');
function set_map_height(){
$map.height($(window).height() - $('#header').outerHeight());
}
set_map_height();
$window.on('resize', function(){
set_map_height();
})
var map = new GMaps({
div: '#map',
lat: 49.8994,
lng: -97.1392
});
$('.markers li a').each(function(){
var $this = $(this),
latlng = $this.data('latlng').split(',');
map.addMarker({
lat: latlng[0],
lng: latlng[1],
title: 'Development',
click: function(e) {
},
infoWindow: {
content: $("#location").html() + i
},
icon: $this.data('icon')
});
});
map.fitZoom();
}
});
</script>
<div id="location">
<?php
$markers = get_field('locations', $post->ID);
foreach($markers as $m): ?>
<h3><?php echo $m['name']; ?></h3>
<p><?php echo $m['location']['address']; ?></p>
<?php
endforeach; ?>
</div>
Thanks SO much for any help, and my apologies if I haven't included enough detail.
The reason you are getting all of the data in the info windows is because you are pulling the HTML from the "location" div. This div is getting populated with ALL of the data as you are looping over the list of markers.
The quickest way to get this to do what you want would be to add the name and address fields to the anchor tags in your list you generate at the top.
<ul class="markers">
<?php
$markers = get_field('locations', $post->ID);
foreach($markers as $m): ?>
<li><a data-latlng="<?php echo $m['location']['coordinates']; ?>" data-icon="<?php bloginfo('template_url'); ?>/assets/img/map_icons/<?php echo $m['icon']; ?>.png" data-name="<?php echo $m['name']; ?>" data-address="<?php echo $m['location']['address']; ?>></a></li>
<?php
endforeach; ?>
Then you can set the info window content directly in your javascript loop.
$('.markers li a').each(function(){
var $this = $(this),
latlng = $this.data('latlng').split(','),
name = $this.data('name'),
address = $this.data('address');
map.addMarker({
lat: latlng[0],
lng: latlng[1],
title: 'Development',
click: function(e) {
},
infoWindow: {
content: "<b>Name:</b>" + name + "<br /><b>Address:</b>" + address
},
icon: $this.data('icon')
});
});
Now, I would suggest changing the entire design for this to use AJAX calls and have your PHP return an array of JSON data rather than storing all of this data in the DOM. You can use JQuery's ajax function and PHP json_encode/json_decode to pass JSON data to/from the web client.
这篇关于Gmaps.js - 带有动态infoWindow内容的多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
