2012-03-21 83 views
1

我有我認爲是一個棘手的問題,但希望有人在這裏可以阻止我撕開我的頭髮!覆蓋標記點與谷歌地圖API ID

我目前正在設法弄清楚如何在覆蓋了託管tileJson圖層的谷歌地圖上疊加一堆標記。

我也想跟隨本教程,這樣我可以當用戶點擊任何地圖上的點的圖片和文字加載到側邊欄:

http://www.dougv.com/2007/07/12/using-ajax-to-update-a-non-map-div-via-google-maps-apis-gdownload-and-gmarker-onclick-event/

本教程是專爲地圖api2(我正在使用3),雖然它看起來可以很容易地更新爲api 3.

現在,部分原因是由於JavaScript連接器,簡化了導入自定義瓷磚,我似乎無法獲得標記工作,更不用說將它們連接到數據庫,並從地圖窗口外部訪問它們。

https://mywebspace.wisc.edu/axler/Web%20Deep%20Map/Web%20Map%20Google%20Maps/index2.html 實時地圖瓷磚...在上面的鏈接。沒有點正在工作,但我在代碼中列出了一些樣本點。

有什麼建議嗎?這是我的代碼。

<html> 
    <head> 
     <title>GOOGLE MAPS TILEMILL</title> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD6VG2UbuMLDCQoZ-GOPZl_PU7r1jXzejU&sensor=false"> 
     </script> 
     <script 
     src='wax/dist/wax.g.min.js' 
     type='text/javascript'></script> 
     <link href='wax/theme/controls.css' rel='stylesheet' type='text/css' /> 
     <link href='style.css' rel = 'stylesheet' type ='text/css' /> 
     <link href='controls.css' rel = 'stylesheet' type = 'text/css' /><script> 
    var map; 
    var sidebar; 


    function pageLoad() { 
    sidebar = document.getElementById('sidebar'); 
    addPoint(1, 'Howards Fish House', 46.72.30616121527788, -92.15); 
    addPoint(2, 'Rices Point', 46.78, -92.18); 
    addPoint(3, 'Wild Rice Seeding Area', 46.80, -92.22); 
     wax.tilejson('http://a.tiles.mapbox.com/v3/slre.st-louis-river-estuary.jsonp', 
     function(tilejson) { 
     var map = new google.maps.Map(
     document.getElementById('mymap'), { 
     center: new google.maps.LatLng(46.72, -92.15), 
     disableDefaultUI: false, 
     zoom: 12, 
     panControl: false, 
     zoomControl: true, 
     zoomControlOptions: { 
     position: google.maps.ControlPosition.TOP_RIGHT 
     }, 
     scaleControl: true, 
     streetViewControl: false, 
     mapTypeControl: false, 
      mapTypeId: google.maps.MapTypeId.ROADMAP }); 

     // Use this code to set a new layer as a baselayer - 
     // which means that it'll be on the bottom of any other 
     // layers and you won't see Google tiles 
     map.mapTypes.set('mb', new wax.g.connector(tilejson)); 
     map.setMapTypeId('mb'); 

    //I want to place a number of points on top of the MapBox hosted tile layer that is specified by wax.tilejson 



    }); 


    } 
function addPoint(pid, name, lat, lng) { 
       var point = new google.maps.LatLng(lat, lng); 
       var marker = new google.maps.Marker(point); 
       map.setMap(marker); 

       var info = '<strong>' + name + '</strong><br />'; 
       info += 'For more information, click the icon.'; 

       google.maps.event.addListener(marker, 'mouseover', function() { 
        marker.openInfoWindow(info); 
       }); 

       google.maps.event.addListener(marker, 'mouseout', function() { 
        map.closeInfoWindow(); 
       }); 

       google.maps.event.addListener(marker, 'click', function() { 
        details.innerHTML = '<em>Loading information ...</em>'; 
        showDivInfo(pid); 
       }); 
      } 

    </script> 

    </head> 


    <body onload="pageLoad()" onunload="pageUnload()"> 
    <div id='sidebar'> 
     <h2>Explore the St. Louis River Estuary</h2> 
     <p>Click on the map points to learn about the stories and science that define the region!</p> 
     <p><span class='source'>Source: <a href='http://www.stlre.pebbleonline.com'>Main Web Page</a></span></p> 
    </div> 
    <div id='mymap'></div> 


    </body> 


    </html> 
+0

請提供一個鏈接到您的地圖在線託管。我們無法在發佈的代碼塊上運行調試器。 – barryhunter 2012-03-21 22:35:33

+0

請記住,當前的代碼缺少很多包含在問題中的功能... – user1270657 2012-03-22 00:04:11

+0

也許我錯過了一些東西,但是您現在最好的嘗試添加標記的位置在哪裏? – barryhunter 2012-03-22 11:21:07

回答

0

This map.setMap(marker);看起來不對。

應該

marker.setMap(map); 

:)

+0

那好!點仍然不會加載,但。在層次結構中是否需要放置addPoint函數? – user1270657 2012-03-22 15:20:49

+0

啊,他們需要在創建地圖本身的「var map = new google.maps.Map」之後。只能將點添加到地圖 - 地圖創建後! – barryhunter 2012-03-22 15:25:21

+0

而實際上你不想在那裏有'var'。想要將地圖對象分配給全局地圖變量,而不是新的本地地圖變量。 – barryhunter 2012-03-22 15:25:59