我正在尝试通过acf实现谷歌地图，除了一件事之外，一切都像魅力一样工作。我希望主图标与其他图标不同，图标将由 acf 上传。感谢您的任何提示。
这是我的一堆代码：
<script type="text/javascript">
var locations = [<?php while( $wp_query->have_posts() ){
$wp_query->the_post();
$location = get_field('carte_google');?>
['<?php the_title(); ?> <br/> <?php the_field('map_description'); ?> <?php the_field('pin'); ?>', <?php echo $location['lat']; ?>, <?php echo $location['lng'];?>, <?php $NUM++ ?>],<?php } ?> ];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: new google.maps.LatLng(45.7830954, 24.0697979),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var image = {
url: 'probably here should be image from acf',
};
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: image,
animation: google.maps.Animation.BOUNCE,
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
提前感谢您的帮助。
有两种可能的解决方案。
1 - 创建类别并使用这些类别设置帖子（当您在地图上有许多具有相同图标的地点时，这很有用）
2 - 创建自定义字段以放置图标
我将同时描述两者。
通过创建类别，您可以轻松地使用相同的图标链接多个位置。我做过一次并使用类别图像插件。循环时，只需识别帖子类别并为其检索图像，例如：
for (i = 0; i < locations.length; i++) {
var image = '<?php echo z_taxonomy_image($term_id); ?>';
// the $term_id is the category from the current post in loop that
// you need to retrieve
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: image,
animation: google.maps.Animation.BOUNCE,
});
使用第二种解决方案，您必须为某些帖子/页面类型创建高级自定义字段，此自定义字段的类型为："图像"。将返回设置为图像 URI，而不是默认选项的对象。对于此示例，假设您将创建一个名为 map_icon 的字段。在您的问题中，我可以看到您已经有一个名为 map_description 的自定义字段，对于相同的 ACF 配置，只需添加图像自定义字段即可。要显示此图像，您可以执行以下操作：
for (i = 0; i < locations.length; i++) {
var image = '<?php the_field('map_icon', $post_id); ?>';
// the $post_id is the current post in loop
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: image,
animation: google.maps.Animation.BOUNCE,
});
自从我这样做以来有很多时间，但是查看一些参考资料，例如 ACF 和类别图像插件，这两个解决方案必须对您有用。
至少我想出了如何为一个帖子（总部 - 引脚）和其他项目的帖子显示不同的图标。这是我使用的代码，它对我有用。也许这对其他人有用。
我在这里从最旧到最新的帖子订购帖子，然后我正在向最旧的帖子添加前缀 + 图像.png。
谢谢你的帖子
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<?php
$args = array(
'post_type' => 'projects',
'posts_per_page' => -1,
'order' => 'ASC'
);
// query
$wp_query = new WP_Query( $args );
$NUM = 0;
?>
<div id="map"></div>
<script type="text/javascript">
var locations = [<?php while( $wp_query->have_posts() ){
$wp_query->the_post();
$location = get_field('carte_google');?>
['<?php the_title(); ?> <br/> <?php the_field('map_description'); ?>', <?php echo $location['lat']; ?>, <?php echo $location['lng'];?>, <?php $NUM++ ?>],
];
var stylowanie = [ { "featureType": "water", "stylers": [ { "visibility": "on" }, { "color": "#46bcec" } ] },{ "featureType": "landscape", "stylers": [ { "color": "#f2f2f2" } ] } ];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: Math.ceil(Math.log2($(window).width())) - 8,
minZoom: Math.ceil(Math.log2($(window).width())) - 8,
maxZoom: Math.ceil(Math.log2($(window).width())) - 8,
center: new google.maps.LatLng(45.7830954, 24.0697979),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
styles: stylowanie,
});
var infowindow = new google.maps.InfoWindow();
var iconURLPrefix = 'http://link.to.your.images.folder/images';
var icons = [
iconURLPrefix + 'image1.png',
iconURLPrefix + 'image2.png',
]
var iconsLength = icons.length;
var marker, i;
var iconCounter = 0;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: icons[iconCounter],
animation: google.maps.Animation.DROP,
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
// We only have a limited number of possible icon colors, so we may have to restart the counter
if(iconCounter > iconsLength) {
iconCounter = 0;
}
else{
iconCounter = 1;
}
}
我希望它也能为你工作