jquery 从谷歌Map外部的外部链接打开infoWindows

tkqqtvp1 于 2023-03-22 发布在 jQuery

关注(0)|答案(1)|浏览(151)

我目前正在使用谷歌MapAPI来创建一个属性Map。我通过自定义发布类型来控制它，该类型通过infoWindows将标记带到Map上，当他们被点击时就会打开。
我现在需要实现某种方式来列出Map下面的属性（最终到一个滑块中），以便当在Map外部单击属性时，Map会平移到标记并打开infoWindow。
目前，我不能让它工作在所有-我不是一个非常强大的javascript编码器，所以任何帮助将不胜感激。
我有一个列表的帖子类型条目下面的Map目前，但没有办法链接他们。
下面是到目前为止Map的代码片段。

/* MARKER 1 */

function add_marker( $marker, map ) {

    // var
    var image = 'http://www.masonyoung.co.uk/wp-content/uploads/2015/08/mason-new.png';
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

    // create marker

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


    // add to array
    map.markers.push( marker );

    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
        // create info window
        var infowindow = new google.maps.InfoWindow({
            content     : $marker.html()
        });



        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'mouseover', function() {

            if($('.gm-style-iw').length) {
                $('.gm-style-iw').parent().hide();
            }

            infowindow.open( map, marker );

        });


            google.maps.event.addListener(marker, "mouseout", function() {
                marker.setAnimation(null);
            });



    }




}

这是我目前为止得到的Map下的属性列表的代码。

<?php 
$maps = get_posts( array(
    'post_type' => 'properties',
    'posts_per_page' => -1
    ) );?>

<?php foreach($maps as $map): ?>
    <?php
     $location = get_field('location',$map->ID);
     $price = get_field('price',$map->ID);
     $squareft = get_field('sq_ft_total',$map->ID);
     $buylet = get_field('to_buy_or_to_let',$map2->ID);
     $link = the_permalink($map->ID);

?>

<div id="map_list">

       <ul id="map-locations">

            <li data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
                <h3><a href="<?php echo post_permalink( $map ); ?>"><?php echo $location['address']; ?></a></h3>
            </li>

        </ul>

     </div>

<?php endforeach; ?>

jquery

来源：https://stackoverflow.com/questions/32351008/open-infowindows-from-an-external-link-outside-of-the-google-map

1条答案

按热度按时间

qvtsj1bj1#

最简单的方法是将每个标记添加到标记数组中。然后为每个标记创建一个链接，其中包含对标记索引的引用，这样您就可以在单击外部链接时触发标记本身的单击事件。

function initMap() {

  var markers = new Array();

  var mapOptions = {
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(1, 1)
  };

  var locations = [
    [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'],
    [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'],
    [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'],
    [new google.maps.LatLng(1, 0), 'Marker 4', 'Infowindow content for Marker 4'],
    [new google.maps.LatLng(1, 1), 'Marker 5', 'Infowindow content for Marker 5'],
    [new google.maps.LatLng(1, 2), 'Marker 6', 'Infowindow content for Marker 6']
  ];

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

  var infowindow = new google.maps.InfoWindow();

  for (var i = 0; i < locations.length; i++) {

    // Append a link to the markers DIV for each marker
    $('#markers').append('<a class="marker-link" data-markerid="' + i + '" href="#">' + locations[i][1] + '</a> ');

    var marker = new google.maps.Marker({
      position: locations[i][0],
      map: map,
      title: locations[i][1],
    });

    // Register a click event listener on the marker to display the corresponding infowindow content
    google.maps.event.addListener(marker, 'click', (function(marker, i) {

      return function() {
        infowindow.setContent(locations[i][2]);
        infowindow.open(map, marker);
      }

    })(marker, i));

    // Add marker to markers array
    markers.push(marker);
  }

  // Trigger a click event on each marker when the corresponding marker link is clicked
  $('.marker-link').on('click', function() {

    google.maps.event.trigger(markers[$(this).data('markerid')], 'click');
  });
}

window.initMap = initMap;

#map {
  height: 160px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map"></div>
<div id="markers"></div>

<!-- 
  The `defer` attribute causes the callback to execute after the full HTML
  document has been parsed. For non-blocking uses, avoiding race conditions,
  and consistent behavior across browsers, consider loading using Promises
  with https://www.npmjs.com/package/@googlemaps/js-api-loader.
  -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" defer></script>

JSFiddle demo

赞(0）回复(0）举报 2023-03-22

我来回答

jquery 从谷歌Map外部的外部链接打开infoWindows

1条答案

相关问题

热门标签

最新问答