0

我正在尝试创建一个网页，其中包含一个带有四个标记的 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>

谢谢！

4

1 回答 1

0

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

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)
);
于 2013-04-17T21:18:22.010 回答