-1

我正在开发一个基于搜索引擎的网站，该网站使用 iframe 将谷歌地图嵌入到每个搜索引擎结果中。问题是大多数用户不关心查看地图，并且在每个搜索结果页面上加载 20 个 iframe，而其中超过 1 个被查看的机会非常渺茫，这很糟糕，因为会减慢网站的加载时间。我正在尝试仅在单击具有“地址链接”的触发器时才加载具有“地址弹出”类的容器内的 iframe。我在我的 css 中将 iframe 的显示设置为 none，尽管它似乎仍在加载，甚至在它可见之前。

触发代码：

<span class="address-link">Address</span>

iframe 代码：

echo '<div class="address-popup">
            <iframe class="map" style="margin-top:45px;" width="570" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q='.$addressString.'&amp;aq=&amp;ie=UTF8&amp;hq=&amp;hnear='.$addressString.'&amp;t=m&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
       </div>';
4

2 回答 2

1

为什么要使用 iframe？您可以直接在一个常见的“弹出式”DIV 中加载谷歌地图，然后在每次点击链接时将该地图居中到选定的地址。这可能比加载整个 HTML 页面要好得多。

这是一个来自概念证明的工作示例，我帮助我的一个朋友实现了 javascript/maps 功能。

http://184.106.239.214/pacific_grove_zoning/

只看源代码。您可以通过在自动完成字段中输入一些地址（“1234..”、“1000...”等）然后选择一个地址来查看地图的变化。

这是该站点中与 google maps 功能相关的主要 javascript 部分

function map_initialize() {
    // instantiate google map
    var initialLatlng = new google.maps.LatLng(37.4328, -122.077);
    var initialOptions = {
        zoom: 18,
        center: initialLatlng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
    map = new google.maps.Map(document.getElementById('property_map'), initialOptions);
    geocoder = new google.maps.Geocoder();
}

function map_to_address(address) {
    if (marker != undefined) {
        marker.setMap(null);
    }
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        // map.fitBounds(results[0].geometry.bounds);
        marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert("Unable to map provided address. Error: " + status);
      }
    });
}
于 2012-11-07T01:41:00.233 回答
1

您可以在 javascript 中包含所有 iframe 的代码。如果你喜欢使用 jQuery，可以这样做：

$('.address-link').click(function(){
   $('.address-popup').html('<iframe class="map" style="margin-top:45px;" width="570" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q='.$addressString.'&amp;aq=&amp;ie=UTF8&amp;hq=&amp;hnear='.$addressString.'&amp;t=m&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>'); 
});

一种更具体的方法可能是使用 data 属性定义目标容器的 id，如下所示：

HTML

<span class="address-link" data-target-id="target-div-7">Address</span>
<div id="target-div-7"></div> <!-- target div -->

jQuery

$('.address-link').click(function(){
   var targetId = $(this).data('target-id');
   $('#' + targetId).html('<iframe class="map" style="margin-top:45px;" width="570" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q='.$addressString.'&amp;aq=&amp;ie=UTF8&amp;hq=&amp;hnear='.$addressString.'&amp;t=m&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>'); 
});

因此对于每个触发器，您可以将目标 id 定义为数据属性，并且可以使用相同的脚本。

于 2012-11-07T01:31:10.867 回答