0

我在使用 Google Maps 和 jQuery 时遇到了一些问题。想知道是否有人可以帮助解决这两个问题中较小的一个，希望它能帮助我解决更大的问题。

我正在使用下面的代码来填充谷歌地图，基本上它使用生成的 HTML 来填充表单中的地图：

 <div class="item mapSearch" id="map52.48228_-1.9026:800">
        <div class="box-prise"><p>(0.62km away)</p><div class="btn-book-now">
                <a href="/venue/800.htm">BOOK NOW</a>

            </div>
        </div><img src="http://media.toptable.com/images/thumb/13152.jpg" alt="Metro Bar and Grill" width="60" height="60" />
      <div class="info">
        <h2><a href="/venue/800.htm">Metro Bar and Grill</a></h2>
        <p class="address">73 Cornwall Street, Birmingham, B3 2DF</p><strong class="proposal">2 courses £14.50</strong>
          <dl>
            <dt>Diner Rating: </dt>

            <dd>7.8</dd>
          </dl></div></div>
      <div class="item mapSearch" id="map52.4754_-1.8999:3195">
        <div class="box-prise"><p>(0.97km away)</p><div class="btn-book-now">
                <a href="/venue/3195.htm">BOOK NOW</a>
            </div>
        </div><img src="http://media.toptable.com/images/thumb/34998.jpg" alt="Filini Restaurant - Birmingham" width="60" height="60" />

      <div class="info">
        <h2><a href="/venue/3195.htm">Filini Restaurant - Birmingham</a></h2>
        <p class="address">Radisson Blu Hotel, 12 Holloway Circus, Queensway, Birmingham, B1 1BT</p><strong class="proposal">2 for 1: main courses </strong>
          <dl>
            <dt>Diner Rating: </dt>
            <dd>7.8</dd>

          </dl></div></div>
      <div class="item mapSearch" id="map52.47775_-1.90619:10657">
        <div class="box-prise"><p>(1.05km away)</p><div class="btn-book-now">
                <a href="/venue/10657.htm">BOOK NOW</a>
            </div>
        </div><img src="http://media.toptable.com/images/thumb/34963.jpg" alt="B1 " width="60" height="60" />
      <div class="info">
        <h2><a href="/venue/10657.htm">B1 </a></h2>

        <p class="address">Central Square , Birmingham, B1 1HH</p><strong class="proposal">25% off food</strong>
          <dl>
            <dt>Diner Rating: </dt>
            <dd>7.9</dd>
          </dl></div></div>

JavaScript 循环遍历所有带有 mapSearch 类的 div，并使用它来绘制标记，使用 div ID 来获取场地的纬度/经度和 ID：

 var locations = $(".mapSearch");
            for (var i=0;i<locations.length;i++) { 
                var id = locations[i].id;
                if (id) {  
                    var jsLonLat = id.substring(3).split(":")[0];
                    var jsId = id.substring(3).split(":")[1];
                    var jsLat = jsLonLat.split("_")[0];
                    var jsLon = jsLonLat.split("_")[1];
                    var jsName =  $("h2").text();
                    var jsAddress =  $("p.address").text(); 
                    var latlng = new google.maps.LatLng(jsLat,jsLon);
                    var marker = new google.maps.Marker({
                        position: latlng, 
                        map:map, 
                        icon: greenRestaurantImage,
                        title: jsName
                    });

                    google.maps.event.addListener(marker, 'click', function() {
                    //Check to see if info window already exists
                        if (!infowindow) {
                            //if doesn't exist then create a empty InfoWindow object
                            infowindow = new google.maps.InfoWindow();
                        }
                    //Set the content of InfoWindow
                    infowindow.setContent(jsAddress);
                    //Tie the InfoWindow to the market
                    infowindow.open(map,marker);
                    });

                    bounds.extend(latlng); 
                    map.fitBounds(bounds); 
                }
            }

标记都在地图上绘制正常，但是我遇到了 infoWindow 位的问题。我想在单击时显示有关每个场地的信息，但是使用上面的代码只会在单击时将所有信息放在一个框中，而不是单独放置。希望这是一个简单的修复！

希望一旦我解决了这个问题，如果我将鼠标悬停在 html 中的 div 上，我可以找到一种方法来显示信息窗口。

4

2 回答 2

1

就我的 jQuery 知识而言，您所看到的是正确的；$("h2").text()将所有H2 的内部文本连接成一个字符串并返回它。您最好尝试以下方法：

// inside your if (id) clause
var jsName = $("h2", locations[i]).text();
var jsAddress = $("p.address", locations[i]).text();

如果你想简化你的代码，你可以.each()结束。$(".mapSearch")

于 2010-05-05T13:37:21.617 回答
0 
$(document).ready(function() {

//<![CDATA[

if (GBrowserIsCompatible()) {

    function createMarker(point, html) {

        var marker = new GMarker(point);

        GEvent.addListener(marker, "click", function() {

            marker.openInfoWindowHtml(html);

        });

        return marker;
    }

    // Display the map, with some controls and set the initial location 

    var map = new GMap2(document.getElementById("map"));

    map.enableContinuousZoom();

    //map.enableScrollWheelZoom();

    map.enablePinchToZoom(); // ForiPhone users

    map.addControl(new GLargeMapControl());

    map.addControl(new GMapTypeControl());

    map.setCenter(new GLatLng(51.53177, -0.08001), 16);

    var icon = new GIcon();

    var point = new GLatLng(51.53177, -0.08001);

    var marker = createMarker(point, '<div style="width:240px" id="mapsball"></div>');

    map.addOverlay(marker, icon);

}

// display a warning if the browser was not compatible

else {

    alert("Sorry, Google Maps is not compatible with your browser");

}


//]]>
});
于 2010-05-05T12:59:00.573 回答