在 WordPress 中显示多个地图指针答案

【问题标题】：Showing Multiple Map Pointer in WordPress在 WordPress 中显示多个地图指针
【发布时间】：2025-11-28 13:15:02
【问题描述】：

我想在来自自定义帖子类型的地图上显示多个地图指针。我可以获得单个 Map 指针。如何在地图上获得多个地图指针？这是我的代码。

<style>
            #map_wrapper {
                height: 400px;
            }

            #map_canvas {
                width: 100%;
                height: 100%;
            }
        </style>
        <?php
        $location = get_field('google_map_lat_long');
        if (!empty($location)):
            ?>
            <?php /* ?>
              <div class="acf-map">
              <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
              </div>
              <?php */ ?>
            <!-- End Content -->

            <script>
                jQuery(function ($) {
                    // Asynchronously Load the map API 
                    var script = document.createElement('script');
                    script.src = "//maps.googleapis.com/maps/api/js?key=AIzaSyA157quXbUlHHgm4wJJxzD49MivKgPSil8&sensor=false&callback=initialize";
                    document.body.appendChild(script);
                });

                function initialize() {
                    var map;
                    var bounds = new google.maps.LatLngBounds();
                    var mapOptions = {
                        mapTypeId: 'roadmap'
                    };

                    // Display a map on the page
                    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                    map.setTilt(45);

                    // Multiple Markers''
                    // $info='';
                    var markers = [
    <?php
    echo '["' . $location['address'] . '",' . $location['lat'] . ',' . $location['lng'] . '],';
    ?>
                    ];



                    // Info Window Content
                    var infoWindowContent = [['<div class="info_content"><h3><?php echo $location['address']; ?></h3><p><?php echo $location['address']; ?></p></div>']];


                    // Display multiple markers on a map
                    var infoWindow = new google.maps.InfoWindow(), marker, i;

                    // Loop through our array of markers & place each one on the map  
                    for (i = 0; i < markers.length; i++) {
                        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
                        bounds.extend(position);
                        marker = new google.maps.Marker({
                            position: position,
                            map: map,
                            title: markers[i][0]
                        });

                        // Allow each marker to have an info window    
                        google.maps.event.addListener(marker, 'click', (function (marker, i) {
                            return function () {
                                infoWindow.setContent(infoWindowContent[i][0]);
                                infoWindow.open(map, marker);
                            }
                        })(marker, i));

                        // Automatically center the map fitting all markers on the screen
                        map.fitBounds(bounds);
                    }

                    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
                    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
                        this.setZoom(14);
                        google.maps.event.removeListener(boundsListener);
                    });

                }
            </script>

            <?php
        endif;
        ?>    


    <?php endwhile; ?>
    <div id="map_wrapper">
        <div id="map_canvas" class="mapping"></div>
    </div>

谢谢，:)

【问题讨论】：

标签： php wordpress google-maps google-maps-api-3

【解决方案1】：

不知道为什么您在向地图添加多个标记时遇到问题，但您或许可以从这个示例中弄清楚该怎么做。

<!doctype html>
<html>
    <head>
        <title>Google maps - multiple markers example</title>

        <script type='text/javascript'>
            /* data, derived from a db call and written as a json object */
            var json={
                "results":{
                    "0":{"name":"Kinnettles","lat":"56.61543329027024","lng":"-2.9266123065796137"},
                    "1":{"name":"Nathro","lat":"56.793249595719956","lng":"-2.8623101711273193"},
                    "2":{"name":"Ark Hill","lat":"56.57065514278748","lng":"-3.0511732892761074"},
                    "3":{"name":"Dodd Hill","lat":"56.54251020079966","lng":"-2.9051538305053555"},
                    "4":{"name":"Govals","lat":"56.582320876071854","lng":"-2.9509015874633633"},
                    "5":{"name":"Carsegownie","lat":"56.67951330362271","lng":"-2.8062983350524746"},
                    "6":{"name":"Frawney","lat":"56.56806620951482","lng":"-2.9501720266113125"},
                    "7":{"name":"North Tarbrax","lat":"56.57144715546598","lng":"-2.92476614282225"},
                    "8":{"name":"The Carrach","lat":"56.6938437674986","lng":"-3.131382067657455"},
                    "9":{"name":"Glaxo","lat":"56.70431711148748","lng":"-2.4660869436035"}
                }
            };

            /* callback function */
            function initialise(){

                var bounds = new google.maps.LatLngBounds();
                var infoWindow = new google.maps.InfoWindow();

                var map = new google.maps.Map( document.getElementById('map'), {
                    zoom:10,
                    center: { lat: 56.6154, lng: -2.9266 }
                });

                /* process json data and add a marker for each location */
                var data=json.results;
                for( var o in data ){

                    var latlng=new google.maps.LatLng( data[o].lat, data[o].lng );
                    var title=data[o].name;

                    var marker = new google.maps.Marker({
                      position: latlng,
                      map: map,
                      title: title,
                      content:title
                    });

                    google.maps.event.addListener(marker, 'click', function(event){
                        infoWindow.setContent( this.content );
                        infoWindow.open(map, this);
                    }.bind(marker));

                    bounds.extend( latlng );
                }
                map.fitBounds(bounds);
            }
        </script>
        <script async defer src='//maps.googleapis.com/maps/api/js?key=AIzaSyA157quXbUlHHgm4wJJxzD49MivKgPSil8&callback=initialise' type='text/javascript'></script>
        <style type='text/css'>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #map{
                display:block;
                box-sizing:border-box;
                width:800px;
                height:600px;
                margin:1rem auto;
                float:none;
                border:3px solid black;
            }
        </style>
    </head>
    <body>
        <div id='map'></div>
    </body>
</html>

【讨论】：

我是新手，我在想，如果我能从那个脚本中得到 1 个 Map 指针，我也能得到多个指针。除了更改整个代码和结构之外，可能只需要对代码进行少量修改
在没有看到标记的实际数据的情况下，很难精确，但看起来你有一个只有一个项目的数组 - 我只是发布上面的内容来提供指导，而不是作为你应该怎么做，或者作为你所有问题的答案..
非常感谢，帮了大忙