Question

下面是一个用于谷歌地图代码的gmap3 jquery插件。我正在努力将谷歌融合层添加到代码中，而不会破坏任何其他内容。添加融合表层的示例如何适合我下面的代码？感谢

<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表格来加载代码。

但是，我想知道你为什么要使用Fusion表。我最近进行了探索并最终使用了KML，因为它更加灵活。只是一个建议。

祝你好运：）

gmap3 / jquery融合表层适合哪里？

2 个答案: