2010-09-16 61 views
0

我試圖從數據庫創建標記。我通過將數據庫結果輸出到json並在谷歌地圖代碼中加載json來做到這一點。 JSON有效且正在加載。從JSON創建標記時出現問題

我的全谷歌地圖代碼:

google.load("maps", "2"); 

// make a json request to get the map data from the Map action 
$(function() { 
if (google.maps.BrowserIsCompatible()) { 
    $.getJSON("/GoogleMaps/Map", initialise); 
} 
}); 

function initialise(mapData) { 

var map = new google.maps.Map2($("#map")[0]); 
    map.addControl(new google.maps.SmallMapControl()); 
    map.addControl(new google.maps.MapTypeControl()); 
    map.setMapType(G_SATELLITE_MAP); 

    var latlng = new google.maps.LatLng(52.370, 4.893); 
    var zoom = 8; 

    map.setCenter(latlng, zoom); 

map.setCenter(latlng, zoom); 

$.each(mapData.locations, function(i, location) { 
    setupLocationMarker(map, location); 
}); 
} 

function setupLocationMarker(map, location) { 
console.debug(location.LatLng); 
var latlng = new google.maps.LatLng(location.LatLng); 
var marker = new google.maps.Marker(latlng); 
map.addOverlay(marker); 
} 

的JSON:

{ 
"locations": [ 
    { 
     "Id": 1, 
     "Name": null, 
     "LatLng": "52.368, 4.806", 
    }, 
    { 
     "Id": 2, 
     "Name": null, 
     "LatLng": "52.333, 4.839", 
    }, 

我用盡調試Firebug的,但我沒有錯誤。座標似乎加載得很好。但是隻有1個標記出現,並且該標記實際上並不附加到它看起來的任何座標(如果縮小它並不公平)。此外,地圖在這一點上非常緩慢。有誰知道如何解決這個問題?

回答

0

試試這個工作對我來說這裏

function setupLocationMarker(map, location) { 
    console.debug(location.LatLng); 
    var point = new GLatLng(location.LatLng);  
    var marker = new GMarker(point); 
    map.addOverlay(marker); 
}; 

嗯是一個很好的strating點使用jQuery你需要在子API密鑰

看到,如果你能得到你所需要的從這個

<script type="text/javascript" src="http://www.google.com/jsapi?key=your_Key_goes_here"></script> 
    <script type="text/javascript" charset="utf-8"> 
     google.load("maps", "2.x"); 
     google.load("jquery", "1.4.2"); 
    </script> 
    <script> 


    $(document).ready(function(){ 
     //setup the map 
     var map = new GMap2(document.getElementById('map')); 
     var state_college = new GLatLng(40.802,-77.833); 
     map.setCenter(state_college, 11); 

     var geo = new GClientGeocoder(); 

     var reasons=[]; 

     reasons[G_GEO_SUCCESS]   = "Success"; 
     reasons[G_GEO_MISSING_ADDRESS] = "Missing Address"; 
     reasons[G_GEO_UNKNOWN_ADDRESS] = "Unknown Address."; 
     reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address"; 
     reasons[G_GEO_BAD_KEY]   = "Bad API Key"; 
     reasons[G_GEO_TOO_MANY_QUERIES] = "Too Many Queries"; 
     reasons[G_GEO_SERVER_ERROR]  = "Server error"; 


     var bounds = new GLatLngBounds(); 

     $("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE)); 
     var mapdata = { 
      "Locations":[ 
       { 
        "id":"6", 
        "name":"Old Main", 
        "lat":"40.79648590088", 
        "lng":"-77.86285400391" 
       }, 
       { 
        "id":"7", 
        "name":"Somewhere Further", 
        "lat":"42.65258026123", 
        "lng":"-73.75623321533" 
       } 

     ]} 


      if (mapdata.Locations.length > 0) { 
       for (i=0; i<mapdata.Locations.length; i++) { 
        var location = mapdata.Locations[i]; 
        addLocation(location); 
       } 
       zoomToBounds(); 
      } 


    function addLocation(location) { 
     var point = new GLatLng(location.lat, location.lng);  
     var marker = new GMarker(point); 
     map.addOverlay(marker); 
     bounds.extend(marker.getPoint()); 
     GEvent.addListener(marker, "click", function(){ 
       showMessage(marker, location.name); 
     }); 

    } 


     function showMessage(marker, text){ 
      var markerOffset = map.fromLatLngToDivPixel(marker.getPoint()); 
      $("#message").hide().fadeIn() 
      .css({ top:markerOffset.y, left:markerOffset.x }) 
      .html(text); 
      map.panTo(marker.getLatLng()); 
     } 

     function zoomToBounds() { 
      map.setCenter(bounds.getCenter()); 
      map.setZoom(map.getBoundsZoomLevel(bounds)-1); 
     } 
    }); 
    </script> 
</head> 
<body> 
    <div id="map"></div> 
    <ul id="list"></ul> 
    <div id="message" style="display:none;"></div> 

</body> 

+0

沒有什麼改變:(我也試過谷歌地圖v3 api,但這給了我同樣的問題,除了地圖保持快速,它不顯示任何標記。 – Prd 2010-09-16 13:02:32

+0

有什麼好運氣? – mcgrailm 2010-09-16 16:31:29

+0

沒有抱歉,問題是座標是作爲一個字符串傳遞的,它應該是一個數字。我將字符串轉換爲數字,現在一切正常。 – Prd 2010-09-17 13:18:40