标记不会在使用wp_query查找点的Google地图上显示 [英] Markers not appearing on Google Map using wp_query to find points
问题描述
我使用 WP Favorite Posts 插件让用户选择自己喜欢的在网站上的旅行。这些帖子使用cookie保存到插件提供的已保存模板中。我已编辑此模板以包含地图并从定制元字段中提取坐标。
完整的模板可以在 http://pastebin.com/zDrr5fPn 。
我用来显示map为：
< div id =mapstyle =width：100％; height：250px; position：relative ; overflow：hidden; -webkit-transform：translateZ（0px）; background-color：rgb（229，227，223）;>< / div>
以及我用于循环的代码是：
$ b $（$ pre>
while（$ loop-> have_posts（））：$ loop-> the_post（）;
if（get_post_meta（$ post-> ID，'custom_latlng'，true）！==''）：？>
< div style =display：block;>
< script type =text / javascript>
函数initialize（）{
//载入地图
map = new google.maps.Map（document.getElementById（'map'），{
zoom：9，
center：new google.maps.LatLng（53.3498，-6.2603），
mapTypeId：google.maps.MapTypeId.ROADMAP，
disableDefaultUI：true
}）;
var savedMarkers = new Array（）;
<？php $ saved_pos = get_post_meta（$ post-> ID，'custom_latlng'，true）;？>
$ b $ function addMarker（）{
var savedMarker = new google.maps.Marker（{
map：map，
position：new google.maps.LatLng（< ;？php echo $ saved_pos？>），
图标：'/wp-content/themes/dublin-visitors-centre/images/saved_icon.png'，
}）;
savedMarkers.push（savedMarker）;
}
}
< / script>
< / div>
目前，当我查看源代码时，可以看到所选的点，坐标出现。但是，它们不会出现在地图上。就好像这些点出现在保存的帖子列表中，但根本不在地图上。
我希望这是有道理的。
干杯
在循环内部只填充一个纬度/经度数组，创建初始化循环外：
< div id =mapstyle =width：100％; height：250px;>< / div>
< script type =text / javascript>
函数initialize（）{
//载入地图
map = new google.maps.Map（document.getElementById（'map'），{
zoom：9，
center：new google.maps.LatLng（53.3498，-6.2603），
mapTypeId：google.maps.MapTypeId.ROADMAP，
disableDefaultUI：true
}）;
//创建标记
（var i = 0; i< savedMarkers.length; ++ i）{
savedMarkers [i] = new google.maps.Marker（{
map：map，
position：new google.maps.LatLng（savedMarkers [i] [0]，
savedMarkers [i] [1]），
icon：'/ wp- content / themes / dublin-visitors-center / images / saved_icon.png'，
}）;
<？php
//创建一个用于存储纬度和经度的php数组$ b $ savedMarkers = array（）;
//使用循环来填充数组
while（$ loop-> have_posts（））：$ loop-> the_post（）;
if（get_post_meta（$ post-> ID，'custom_latlng'，true）！==''）：
$ savedMarkers [] = explode（'，'，get_post_meta（$ post-> ID，'custom_latlng'，true））;
endif;
endwhile;
？>
//将数组打印为js变量
savedMarkers =<？php echo json_encode（$ savedMarkers）;？>;
< / script>
未经测试，可能存在一些错误，但它应该足以证明工作流程。 / b>
相关评论：
将后标题应用为infowindow-内容还将标题存储在savedMarkers-items中：
$ savedMarkers [] = array_merge（explode（'，'，get_post_meta（ $ post-> ID，'custom_latlng'，true）），
array（get_the_title（）））;
创建标记时，为存储infowindow内容的标记创建自定义属性（让我们调用属性 content ）：
//创建标记
for（var i = 0; i< savedMarkers.length; ++ i）{
savedMarkers [i] = new google.maps.Marker（{
map：map，
position ：new google.maps.LatLng（savedMarkers [i] [0]，
savedMarkers [i] [1]），
图标：'/ wp-content / themes / dublin-visitors-center / images /saved_icon.png'，
//内容（post-title）
content：savedMarkers [i] [2]
}）;
}
现在将此内容用作infowindow-content：
google.maps.event.addListener（savedMarkers [i]，'click'，function（）{
infowindow.setContent（this.get 'content'））;
infowindow.open（this.getMap（），this）;
}
）;
您也可以创建链接infowindows中的帖子： $ b
$ savedMarkers [] = array_merge（explode（'，'，get_post_meta（$ （）），
数组（get_the_title（），get_permalink（）））;
......
//为（var i = 0; i< savedMarkers.length; ++ i）{
savedMarkers [i] = new google.maps创建标记
。标记（{
map：map，
position：new google.maps.LatLng（savedMarkers [i] [0]，
savedMarkers [i] [1]），
icon ：'/wp-content/themes/dublin-visitors-centre/images/saved_icon.png'，
//内容（后标题）
标题：''+ savedMarkers [i] [2 ]，
// post-URL
href：savedMarkers [i] [3]
}）;
}
..........
google.maps.event.addListener（savedMarkers [i]，'click'，function（）{
var link = document.createElement 'a'）;
link.appendChild（document.createTextNode（this.get（'title'）））;
link.setAttribute（'href'，this.get（'href'））;
infowindow.setContent（link）;
infowindow.open（this.getMap（），this）;
}
）;
I am using the WP Favorite Posts plugin to allow users to select their favourite tours on the site. The posts are saved using to cookies to a saved template provided by the plugin. I have edited this template to include a map and to pull the coordinates from a Custom Meta Field.
The full template can be found at http://pastebin.com/zDrr5fPn.
The code I have included to display the map is:
<div id="map" style="width: 100%; height: 250px; position: relative; overflow: hidden; -webkit-transform: translateZ(0px); background-color: rgb(229, 227, 223);"></div>
and the code I am using for the loop is:
while ( $loop->have_posts() ) : $loop->the_post();
if ( get_post_meta($post->ID, 'custom_latlng', true) !== '' ) : ?>
<div style="display:block;">
<script type="text/javascript">
function initialize() {
//load map
map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: new google.maps.LatLng(53.3498, -6.2603),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
});
var savedMarkers = new Array();
<?php $saved_pos = get_post_meta($post->ID, 'custom_latlng', true);?>
function addMarker() {
var savedMarker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(<?php echo $saved_pos ?>),
icon: '/wp-content/themes/dublin-visitors-centre/images/saved_icon.png',
});
savedMarkers.push(savedMarker);
}
}
</script>
</div>
At the moment, when I view the source, I can see the points being selected, the coordinates do appear. However they do not appear on the map itself. It is as if the points are appearing in the list of saved posts but not on the map at all.
I hope this makes sense.
Cheers
Inside the loop only populate an array with the latitudes/longitudes, create initialize outside of the loop:
<div id="map" style="width: 100%; height: 250px;"></div>
<script type="text/javascript">
function initialize() {
//load map
map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: new google.maps.LatLng(53.3498, -6.2603),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
});
//create the markers
for(var i=0;i<savedMarkers.length;++i){
savedMarkers[i] = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(savedMarkers[i][0],
savedMarkers[i][1]),
icon: '/wp-content/themes/dublin-visitors-centre/images/saved_icon.png',
});
}
}
<?php
//create a php-array to store the latitudes and longitudes
$savedMarkers=array();
//use the loop to populate the array
while ( $loop->have_posts() ) : $loop->the_post();
if ( get_post_meta($post->ID, 'custom_latlng', true) !== '' ) :
$savedMarkers[]=explode(',',get_post_meta($post->ID, 'custom_latlng', true));
endif;
endwhile;
?>
//print the array as js-variable
savedMarkers= <?php echo json_encode($savedMarkers);?>;
</script>
It's not tested, there may be some errors, but it should be sufficient to demonstrate the workflow.
Related to the comments: To apply the post-title as infowindow-content also store the title in the savedMarkers-items:
$savedMarkers[]=array_merge(explode(',',get_post_meta($post->ID, 'custom_latlng', true)),
array(get_the_title()));
when you create the marker create a custom property for the marker where you store the infowindow-content(let's call the property content):
//create the markers
for(var i=0;i<savedMarkers.length;++i){
savedMarkers[i] = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(savedMarkers[i][0],
savedMarkers[i][1]),
icon: '/wp-content/themes/dublin-visitors-centre/images/saved_icon.png',
//the content(post-title)
content: savedMarkers[i][2]
});
}
Now use this content as infowindow-content:
google.maps.event.addListener(savedMarkers[i], 'click', function() {
infowindow.setContent(this.get('content'));
infowindow.open(this.getMap(), this);
}
);
You may also create a link to the posts inside the infowindows:
$savedMarkers[]=array_merge(explode(',',get_post_meta($post->ID, 'custom_latlng', true)),
array(get_the_title(),get_permalink()));
......
//create the markers
for(var i=0;i<savedMarkers.length;++i){
savedMarkers[i] = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(savedMarkers[i][0],
savedMarkers[i][1]),
icon: '/wp-content/themes/dublin-visitors-centre/images/saved_icon.png',
//the content(post-title)
title: '' + savedMarkers[i][2],
//post-URL
href: savedMarkers[i][3]
});
}
..........
google.maps.event.addListener(savedMarkers[i], 'click', function() {
var link=document.createElement('a');
link.appendChild(document.createTextNode(this.get('title')));
link.setAttribute('href',this.get('href'));
infowindow.setContent(link);
infowindow.open(this.getMap(), this);
}
);
这篇关于标记不会在使用wp_query查找点的Google地图上显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
