标记没有出现在谷歌地图上使用wp_query查找点
Markers not appearing on Google Map using wp_query to find points
我正在使用WP Favorite Posts插件,允许用户在网站上选择他们最喜欢的旅行。帖子使用to cookie保存到插件提供的已保存模板中。我已经编辑了这个模板,包括一个地图,并从自定义元字段中提取坐标。
完整模板可在http://pastebin.com/zDrr5fPn.
我包含的显示地图的代码是:
<div id="map" style="width: 100%; height: 250px; position: relative; overflow: hidden; -webkit-transform: translateZ(0px); background-color: rgb(229, 227, 223);"></div>
我在循环中使用的代码是:
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>
目前,当我查看源时,我可以看到正在选择的点,坐标确实会出现。然而,它们并没有出现在地图上。就好像这些点出现在保存的帖子列表中,但根本不在地图上。
我希望这是有道理的。
干杯
在循环内只填充纬度/经度的数组,在循环外创建initialize
:
<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>
它没有经过测试,可能会有一些错误,但应该足以演示工作流。
与评论相关:要将文章标题应用为信息窗口内容,还需要将标题存储在savedMarkers项目中:
$savedMarkers[]=array_merge(explode(',',get_post_meta($post->ID, 'custom_latlng', true)),
array(get_the_title()));
当您创建标记时,为存储信息窗口内容的标记创建一个自定义属性(让我们称之为属性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]
});
}
现在将此内容用作信息窗口内容:
google.maps.event.addListener(savedMarkers[i], 'click', function() {
infowindow.setContent(this.get('content'));
infowindow.open(this.getMap(), this);
}
);
您还可以在信息窗口中创建一个帖子链接:
$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);
}
);
相关文章:
- 在javascript中接收来自mssql.query的变量
- Query JS Ext.data.Store
- Chrome扩展,Chrome.tabs.query的结果未定义
- 如何将解析云代码的query.count结果保存在变量中
- Wordpress:javascript在服务器上的wp-admin中不起作用
- Dojo:TypeError:marketStore.query不是函数
- jQuery在单击按钮时中止所有AJAX请求(query)
- JQuery自动完成-在焦点上显示完整菜单(从WP短代码中)
- “query”是MongoDB中的保留名称吗?
- 通过JavaScript/jQuery运行PHP SQL Query以隐藏条目
- CSS Media Query 和 Javascript/jQuery 不匹配
- Google Fusion Table Javascript UPDATE Query?
- JS为幻灯片创建与WP冲突
- 如何使用Parse.Query检索特定对象
- JS Sequelize "Where Related" Query?
- node-mysql connection.query() returns undefined
- Ctrl+鼠标滚轮缩放在Chrome和Opera中无法使用某些WP主题
- 更新到WP 4.5后,Wordpress中出现Visual Composer错误
- WP Enfold Layerslider:如何将静态内容放在滑块上方
- 显示多个内容项目从一个动态列表(Wordpress WP-Query)与Javascript幻灯片效果