gmap3 / jquery融合表图层适合放置在哪里？

Question

以下是Google Maps代码的gmap3 jquery插件。 我正在努力将Google融合层添加到代码中，而没有破坏其他任何内容。 添加融合表层的示例如何适合下面的代码？ 谢谢

<div id="gMap"></div>

<script type="text/javascript">
//<![CDATA[
jQuery.noConflict(); jQuery(document).ready(function(){  
    //MAP ZOOM (0 to 20)
    var zoomLevel = 14,
    gMap = jQuery("#gMap"),
    //iPad,iPhone,iPod...
    deviceAgent = navigator.userAgent.toLowerCase(),
    iPadiPhone = deviceAgent.match(/(iphone|ipod|ipad)/);

//iPad Stuff
if (iPadiPhone) {
    //ADD MAP CONTROLS AND POST ARROWS
    jQuery("#footer").prepend('<div class="markerNav" title="Prev" id="prevMarker">&lsaquo;</div><div id="markers"></div><div class="markerNav" title="Next" id="nextMarker">&rsaquo;</div><div id="mapTypeContainer"><div id="mapStyleContainer"><div id="mapStyle" class="satellite"></div></div><div id="mapType" title="Map Type" class="satellite"></div></div>');
} else {//IF NOT iPad
    jQuery('#zoomIn').live('click',function(){
        zoomLevel += 1;
        gMap.gmap3({action: 'setOptions', args:[{zoom:zoomLevel}]});
    });
    jQuery('#zoomOut').live('click',function(){
        zoomLevel -= 1;
        gMap.gmap3({action: 'setOptions', args:[{zoom:zoomLevel}]});
    });
    //ADD MAP CONTROLS AND POST ARROWS
    jQuery("#footer").prepend('<div class="markerNav" title="Prev" id="prevMarker">&lsaquo;</div><div id="markers"></div><div class="markerNav" title="Next" id="nextMarker">&rsaquo;</div><div id="mapTypeContainer"><div id="mapStyleContainer"><div id="mapStyle" class="satellite"></div></div><div id="mapType" title="Map Type" class="satellite"></div></div><div class="zoomControl" title="Zoom Out" id="zoomOut"><img src="images/zoomOut.png" alt="-" /></div><div class="zoomControl" title="Zoom In" id="zoomIn"><img src="images/zoomIn.png" alt="+" /></div>');
}    
    jQuery('body').prepend("<div id='target'></div>");

然后它继续我的标记，并通过平移功能将其加载

gMap.gmap3({ 
        action: 'init',
        onces: {
          bounds_changed: function(){
            var number = 0;
            jQuery(this).gmap3({
              action:'getBounds', 
              callback: function (){

                add(jQuery(this), number += 1, "marker1", "map_post.html", "Steve", "40.48805717","-80.24950375", '<img width="95" height="95"  alt="" />');
                add(jQuery(this), number += 1, "marker2", "map_post.html","Steve","40.48973507","-80.19283214", '<img width="95" height="95" src="" alt="" />');
              }
            });
          }
        }
      },{ 
        action: 'setOptions', args:[{
            zoom:zoomLevel,
            scrollwheel:true,
            disableDefaultUI:true,
            disableDoubleClickZoom:false,
            draggable:true,
            mapTypeControl:false,
            panControl:false,
            scaleControl:false,
            streetViewControl:false,
            zoomControl:false,
            //MAP TYPE: 'roadmap', 'satellite', 'hybrid'
            mapTypeId:'roadmap'
        }]
    });

    function add(jQuerythis, i, title, link, excerpt, lati, longi, img){
      jQuerythis.gmap3({
        action : 'addMarker',
        lat:lati,
        lng:longi,
        //PIN MARKER IMAGE
        options: {icon: new google.maps.MarkerImage('images/pin.png')},
        events:{
            mouseover: function(marker){
                jQuerythis.css({cursor:'pointer'});
                jQuery('#markerTitle'+i+'').fadeIn({ duration: 200, queue: false }).animate({bottom:"32px"},{duration:200,queue:false});
                jQuery('.markerInfo').removeClass('activeInfo').hide();
                jQuery('#markerInfo'+i+'').addClass('activeInfo').show();
                jQuery('.marker').removeClass('activeMarker');
                jQuery('#marker'+i+'').addClass('activeMarker');
            },
            mouseout: function(){
                jQuerythis.css({cursor:'default'});
                jQuery('#markerTitle'+i+'').stop(true,true).fadeOut(200,function(){jQuery(this).css({bottom:"0"})});
            },
            click: function(marker){window.location = link}
        },
        callback: function(marker){
          var jQuerybutton = jQuery('<div id="marker'+i+'" class="marker"><div id="markerInfo'+i+'" class="markerInfo"><h2>'+title+'</a></h2><p>'+excerpt+'</p><div class="markerTotal">'+i+' / <span></span></div></div></div>');
          jQuerybutton.mouseover(function(){
              jQuerythis.gmap3({
                action:'panTo', 
                args:[marker.position]
              });
              jQuery("#target").stop(true,true).fadeIn(1200).delay(500).fadeOut(1200);
           });
          jQuery('#markers').append(jQuerybutton);
          var numbers = jQuery(".markerInfo").length;
          jQuery(".markerTotal span").html(numbers);
          if(i == 1){
            jQuery('.marker:first-child').addClass('activeMarker').mouseover();
          }
          jQuerythis.gmap3({
            action:'addOverlay',
            content: '<div id="markerTitle'+i+'" class="markerTitle">'+title+'</div>',
            latLng: marker.getPosition()
           });
        }           
      });
    }

使用所有这些代码，我迷失了在哪里添加片段以覆盖我的融合表并保留标记的信息。

这是向新地图添加融合表的示例。 不存在的一个：

function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(37.4, -122.1),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

    // Initialize the first layer
    var firstLayer = new google.maps.FusionTablesLayer({
      query: {
        select: 'geometry',
        from: '196LqydLhOq1Wl9612hNhcGoh4vUmRjTaiFvDhA'
      },
      map: map,
      suppressInfoWindows: true
    });
    google.maps.event.addListener(firstLayer, 'click', function(e) {
      windowControl(e, infoWindow, map);
    });

Answer 1

这是gmap3的错误版本。 我试图将较新的版本代码放入较旧的版本中。 因此，我只是查找了正确版本的代码。 感谢大家。

Answer 2

最后，应该通过添加常规Google Fusion Tables加载代码来简单地工作。

但是，我想知道为什么要使用Fusion Table。 我最近对其进行了研究，并最终使用KML，因为它更加灵活。 只是一个建议。

祝好运 ：）