Question

我最近一直在玩Google Maps API，我有链接执行JS功能。这个JS函数部分工作，点击它将地图中心到pin coords，但我也希望它显示infowindow;除了打开信息窗外，一切都有效。任何帮助都会很棒！代码有点混乱PHP / WP函数。

    <script type="text/javascript">

    var map;
    var infowindow;
    var marker;

    function initialize() {
        var styles = [
            {
                stylers: [
                    { hue: "#c09c3d" },
                ]
            },{
                featureType: "road",
                elementType: "geometry",
                stylers: [
                    { lightness: 50 },
                    { visibility: "simplified" }
                ]
            }
         ];

         infowindow = new google.maps.InfoWindow({
             maxWidth: 275
         });

        var mapOptions = {
            zoom: 4,
            center: new google.maps.LatLng(<?php echo $centerCoords; ?>),
            styles: styles,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };

        map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);

        var image = '<?php echo get_template_directory_uri(); ?>/images/icon_marker.png';

        var locations = [
             <?php
                // LOOP ARGUMENTS
                $args = array( 'post_type' => 'cbd_dealers', 'posts_per_page' => -1, 'orderby' => 'menu_order', 'order' => 'ASC' ); // -1 Shows ALL Posts
                $loop = new WP_Query( $args );
                while ( $loop->have_posts() ) : $loop->the_post();

                // CUSTOM CONTENT
                $dealerStreetAddress = get_post_meta($post->ID,"dealerStreetAddress",true);
                $dealerCity = get_post_meta($post->ID,"dealerCity",true);
                $dealerState = get_post_meta($post->ID,"dealerState",true);
                $dealerZipCode = get_post_meta($post->ID,"dealerZipCode",true);
                $dealerCoords = get_post_meta($post->ID,"dealerCoords",true);
                $dealerPhoneNumber = get_post_meta($post->ID,"dealerPhoneNumber",true);
                $dealerLink = get_post_meta($post->ID,"dealerLink",true);
            ?>

            {
                latlng : new google.maps.LatLng<?php echo $dealerCoords; ?>,

                info: '<style>a{color:#000000 !important;}a:hover{color:#DCB54F !important;}</style><strong style="line-height:25px;display:block;width:230px;"><?php the_title();  ?></strong><?php echo $dealerStreetAddress; ?><br /><?php echo $dealerCity; ?>, <?php echo $dealerState; ?>&nbsp;<?php echo $dealerZipCode; ?><br /><?php echo $dealerPhoneNumber; ?><br /><a href="<?php echo $dealerLink; ?>" style="line-height:25px;display:block;width:230px;" target="_blank">View Website</a>'
            },

          <?php /* END WHILE AND RESET QUERY */ endwhile; wp_reset_query(); ?>

              ];

            for (var i = 0; i < locations.length; i++) {  
                marker = new google.maps.Marker({
                    position: locations[i].latlng,
                    icon: image,
                    map: map
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {   
                  return function() {

                    infowindow.setContent(locations[i].info);
                    infowindow.open(map, marker);
                  }
                })(marker, i));
            }

    }
    function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';
        document.body.appendChild(script);
        }
     function set_map_center(lat, lng) {

              var myLatLng = new google.maps.LatLng(lat, lng);
              infowindow.open(map,marker);

              map.setCenter(myLatLng);
              map.setZoom(12);
              infowindow.open(map, marker);
        }

    window.onload = loadScript;
</script>

Answer 1

感谢Suvi的评论，我明白了。

首先，您需要在创建数组时将所有标记存储在数组中。然后在你的set_map_center函数中，你可以浏览标记以找到匹配的Lat / Lng，然后触发该标记的点击事件。

触发标记点击事件：

google.maps.event.trigger(markers[i], 'click');

以下是我检查lat / lng匹配的方法

function set_map_center(lat, lng){
    var pos = new google.maps.LatLng(lat, lng)
    for(var i=0;i<markers.length;i++){
        if(markers[i].position.equals(pos))
            google.maps.event.trigger(markers[i], 'click');

    }
}

JSFiddle Example

Google Maps API V3 - 元素onClick - 中心地图/打开InfoWindow

1 个答案: