Question

我正在使用google地图api的wordpress网站，但我通过在谷歌地图infowindow中添加评级小部件遇到问题。评级标准显示但不是明星。

这是截图

这是我的代码

 <script type="text/javascript">
    jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
});
function initialize() {
    var map, casino_name, lat, longt ;
    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
    var markers = [
        //[casino_name, lat,  longt],
        <?php
        $tooltip = '';
        $args = array(
            'post_type' => 'page',
            'post_parent' => get_the_ID(),
        );
        // The Query
        $the_query = new WP_Query( $args );
        // The Loop
        if ( $the_query->have_posts() ) {
            while ( $the_query->have_posts() ) {
                $the_query->the_post();
                $post_id = get_the_ID();
                    echo "['".$casino_name = get_field('casino_name', $post_id)."', ".get_field('latitude', $post_id).', '.get_field('longitude', $post_id).']';
                    $rating = do_shortcode('[ratingwidget type="page" post_id='.get_the_ID().']');
                    $tooltip .= "['".'<img src="'.get_field('casino_logo', $post_id).'" alt=""/>'." ".'<a class="casino-link" href="'.get_field('casino_link', $post_id).'">'.get_field('casino_name', $post_id).'</a>'." ".$rating."']";

                    if (($the_query->current_post +1) != ($the_query->post_count)){
                        echo ',';
                        $tooltip .= ',';
                    }

                 wp_reset_postdata();
            }

        } 
        /* Restore original Post Data */
        wp_reset_postdata(); 
    ?>

    ];

  // Info Window Content
    var infoWindowContent = [
       <?php echo $tooltip;  ?>
    ];


    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow();
    var  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);
                console.log(infoWindow);
            }
        })(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>

Answer 1

要实现Info Box而不是标准的Info Window，首先要将InfoBox JS添加到您的站点。

根据this page.

底部属性表中的选项列表设置信息框的选项

以下是一个简单示例，这些选项可以放在地图代码中的任何位置：

// Set infobox options
var boxOptions = {
    boxClass: "box-styles", /* Applies a class to your box for styling */
    zIndex: 9999,
    boxStyle: {
        opacity: 0.75,
        width: "222px"
    },
    closeBoxMargin: "10px",
    closeBoxURL: "/assets/img/icons/cancel.png",
}

然后在您的代码中，只需替换：

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

使用：

// Display multiple markers on a map
var infoBox = new InfoBox(boxOptions);

然后在您的点击事件中用InfoBox（）替换InfoWindow（）的每个实例，如下所示：

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

以上内容应该大致了解如何实现这一点。如果您仍然遇到问题 - 我建议您使用您的代码创建一个fiddle并从中开始工作。希望这会有所帮助。

另请参阅此处的示例：http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

如何在google map api infowindow中添加星级？

1 个答案: