Question

我正在尝试创建一个网页，其中包含一个带有四个标记的Google Maps API，可以点击这些标记打开一个信息框，每个标记都有自己的信息。这个工作完全正常，但是我也有地图下面的图片，我想链接到Google Maps API并打开每个链接代表的标记，但我似乎无法绕过它。我试过看看其他这样的问题并尝试了他们的答案，但我不知道如何将它实现到我自己的代码中。

这是我到目前为止的代码：

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(53.487509,-2.240009),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    var infoWindow = new google.maps.InfoWindow;

    var myLocations = [
        ["Manchester Town Hall", "This magnificent building was designed in Victorian Gothic style by Alfred Waterhouse and opened in 1877. Amongst its many treasures are the Ford Maddox Brown murals which are monument to the ideas of Victorian Manchester, portraying science, invention, education, trade and textile industry.", "townhall.jpg", "http://www.manchester.gov.uk/", 53.479366, -2.244671],
        ["Manchester Royal Exchange Theatre", "Situated in the heart of Manchester, the Royal Exchange is an award-winning producing Theatre with a history spanning five decades. Known for producing classics such as William Shakespeare, we're also one of the country's leading theatres for new writing, with over 125 premieres in the theatre history!", "royalexchange.jpg", "http://www.royalexchange.co.uk/",  53.482696, -2.244588],
        ["Afflecks's Palace", "Afflecks is an emporium of eclecticism in Manchester’s Northern Quarter. A fantastic place to shop for anything unique, handmade or quirky! With over 73 units filled with individual sellers, you'll be sure to find something you love, or something for someone else!", "afflecks.jpg", "http://www.afflecks.com/", 53.482677, -2.23634],
        ["The Printworks", "The Printworks is a buzzing, state of the art entertainment complex located in the heart of Manchester City Centre. It is home to a range of restaurants, bars and clubs alongside a cinema and gym. The Printworks has something to offer both day and night.", "printworks.jpg", "http://www.theprintworks.com/", 53.485061, -2.241509]
        ];


    function infoCallback(infowindow, marker) { 
        return function() {
        infowindow.open(map, marker);
    };
   }    

   function setMarkers(map, myLocations) {  
    for (var i in myLocations)     {                                        
        var name    = myLocations[i][0];
        var info    = myLocations[i][1];
        var image   = myLocations[i][2];
        var url     = myLocations[i][3];
        var lat     = myLocations[i][4];
        var lng     = myLocations[i][5];
        var latlngset;
        latlngset = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({  
          map: map,  title: name,  position: latlngset  
        });


        var content = 
        '<div class="mapContent"><h3>' + name + '</h3>' + '<img width="192" height="128" src="images/' + image + '"> <div class="mapContentText">' + info + '</div> <h4><a href="' + url + '" target="_blank">' + url + '</a></h4> </div>';

        var infowindow = new google.maps.InfoWindow();
          infowindow.setContent(content);
          google.maps.event.addListener(
            marker, 
            'click',
            infoCallback(infowindow, marker)
          );
      }
    }           
    setMarkers(map, myLocations);
  };

带有地图的HTML信息以及下方显示的图片，我想单独链接到各自的地图标记：

<!DOCTYPE html>
<head>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5Iwz01YK3kUnBKFSB7W0PML2XcIChJCc&sensor=false"></script>
    <script src="js/mapScript.js"></script>       
</head>

<body onload="initialize()">

    <section id="mapContainer">
    </section>

    <img src="images/tag_townhall.jpg">
    <img src="images/tag_royalexchange.jpg">
    <img src="images/tag_printworks.jpg">
    <img src="images/tag_afflecks.jpg">
</body>

谢谢！

Answer 1

将相同的点击监听器添加到相应的图像。

1。添加名称属性以便能够选择图像

<img name="someName" src="images/tag_townhall.jpg">
<img name="someName" src="images/tag_royalexchange.jpg">
<img name="someName" src="images/tag_printworks.jpg">
<img name="someName" src="images/tag_afflecks.jpg">

2。添加监听器：

google.maps.event.addDomListener(
  document.getElementsByName('someName')[i], 
  'click',
  infoCallback(infowindow, marker)
);

Google地图标签信息框在外部链接上打开？

1 个答案: