谷歌地图API V3 - 元素点击 - 中心地图/打开信息窗口

Google Maps API V3 - Element onClick - Center Map / Open InfoWindow

本文关键字:信息 信息窗 地图 窗口 V3 API 元素 谷歌地图 心地      更新时间:2023-09-26

我最近一直在玩谷歌地图API,我有执行JS功能的链接。这个JS函数部分工作,单击时它将地图居中到引脚坐标,但我也希望它显示信息窗口;除了打开信息窗口外,一切正常。任何帮助都会很棒!代码有点混乱的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>

多亏了苏维的评论,我理解得更好了。

首先,您需要在创建标记时将所有标记存储在一个数组中。 然后在set_map_center函数中,您可以扫描标记以找到匹配的纬度/Lng,然后触发该标记的单击事件。

要触发标记单击事件,请执行以下操作:

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

这是我检查纬度/液化天然气匹配的方法

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 示例