Question

我想在来自自定义帖子类型的地图上显示多个地图指针。我能够获得单个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>

谢谢，））

Answer 1

不确定为什么在向地图添加多个标记时遇到问题，但您可以从此示例中找出解决方法。

 $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
        // Create the chart
        $('#container').highcharts('StockChart', {


            rangeSelector : {
                selected : 1
            },

            title : {
                text : 'AAPL Stock Price'
            },

            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]

        }, function (chart) {

            // apply the date pickers
            setTimeout(function () {
                $('input.highcharts-range-selector').datepicker();
            }, 0);
        });
    });




});

在WordPress中显示多个地图指针

1 个答案: