Question

我想使用高级自定义字段来放置Google地图图标。我更喜欢使用转发器字段，但首先我要尝试完成常规字段。图像字段输出是url。我不明白我做错了什么？

以下是我的代码中的代码段：

<script>
<?php $image = get_field('marker'); ?>

function initialize() {

        //add map, the type of map
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 15,
            center: new google.maps.LatLng(52.355692, 5.619524),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        //add locations
        var locations = [
            ['Hotspot1', 52.355889, 5.619535,'<?php echo $image ;?>'],
            ['Hotspot2', 52.354349, 5.618924,'$get_google_map']
        ];

        //declare marker call it 'i'
        var marker, i;

        //declare infowindow
        var infowindow = new google.maps.InfoWindow();

        //add marker to each locations
        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: locations[i][3]
            });

            //click function to marker, pops up infowindow
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>                
            <script async defer src="https://maps.googleapis.com/maps/api/js?key=hidden&callback=initialize">
            </script>
 <?php endwhile; ?>
</div>
<?php endif; ?>

提前致谢，

吉诺

Answer 1

缺少$get_google_map的回音。不确定是什么意思，因为它没有定义

  var locations = [
        ['Hotspot1', 52.355889, 5.619535,'<?php echo $image ;?>'],
        ['Hotspot2', 52.354349, 5.618924,'$get_google_map']
    ];

应该是

  var locations = [
        ['Hotspot1', 52.355889, 5.619535,'<?php echo $image ;?>'],
        ['Hotspot2', 52.354349, 5.618924,'<?php echo $get_google_map ;?>']
    ];

检查浏览器源中的输出以查看locations数组的实际外观或使用console.log(locations)

将其记录到控制台

Answer 2

感谢您的快速回复。我将代码更改为：

            <script>
            <?php $image = get_field('marker'); ?>


            function initialize() {
                //add map, the type of map
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 15
                    , center: new google.maps.LatLng(52.355692, 5.619524)
                    , mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                //add locations
                var locations = [
        ['Hotspot1', 52.355889, 5.619535, '<?php echo $image ;?>']
        , ['Hotspot2', 52.354349, 5.618924, '<?php echo $image ;?>']
    ];

因为 $ get_google_map 来自之前的测试。但不幸的是 $ image 不会输出任何内容。

使用js中的高级自定义字段值作为Google地图标记

2 个答案: