2011-09-20 89 views
0

我最近設置了我的網站的移動版本,並且在移動版本的Google Maps V3 infowindows上遇到了一些問題。 我想從我的JSON文件中添加一些數據以顯示在infowindows中。我對JSON和JavaScript完全陌生。 下面是我的主要桌面網站上的infowindows的內容字符串,它完美地工作。Google maps infowindow JSON問題

var contentString = '<div align="left"><p style="color:#000000;"><a href="http://publicaccessgolf.com.au/' + data.course[i].slug + '" >' + data.course[i].name + '</a><br />' + data.course[i].address + '<br />' + data.course[i].contact + '</p></div>'; 

我想將此添加到我的移動網站,但它不起作用,地圖根本不顯示,或者沒有顯示標記。 下面是代碼的一部分,我的移動網站

function addMarker(map, position){ 
    var marker = $('#map_canvas').gmap('addMarker', { 'position': position }); 
    var contentString = 'Need to add info in here...' ; 

    var infoWindow = $('#map_canvas').gmap('addInfoWindow', { 'position':marker.get(0).getPosition(), 'content': contentString }); 
    marker.click(function() { 
     infoWindow.get(0).open(map, marker.get(0)); 
     map.panTo(marker.get(0).getPosition()); 
    }); 
} 

任何想法,爲什麼從正常網站的代碼將無法正常工作?

回答

0

內容可能有問題,例如: data.course [i] .name中的撇號

你有沒有嘗試過這樣做(更換你marker.click()函數):

google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(contentString); 
     infoWindow.open(map, this); 
     map.panTo(marker.get(0).getPosition()); 
}); 
+0

不,我不這麼認爲,因爲它是工作在主桌面網站。我認爲這只是contentString變量的移動網站語法問題。如果這有道理? – user537137

+0

對不起,我錯過了那個細節。還沒有手機地圖的經驗,所以不知道。我會建議也許可以放棄gMap插件,而只是自己做所有的JS。 – duncan

+0

沒有辦法,不知道從哪裏開始。 gMap插件做得很好,我只是無法弄清楚如何將內容放入infowindow中 – user537137

0

您只需通過調用事件訪問添加GeoJSON的一個google.maps.data層的數據。 feature.getProperty( 'nameofproperty')。其中'nameofproperty'可以是數字或字符串(geoJson文件中的屬性名稱)。

這裏一個簡單的例子,我使用的是正常工作:

//Load mapdata via geoJson 
myDataLayer = new google.maps.Data(); 
myDataLayer.loadGeoJson("myData.geojson"); 
var featureStyle = { 
    icon: "mm_purple.png" 
    }; 
myDataLayer.setStyle(featureStyle); 
myDataLayer.setMap(map); 

//listen for click events and show infowindow 
var infoWindow = new google.maps.InfoWindow(); 
     myDataLayer.addListener('click', function(event) { 
     infoWindow.setContent('first property: '+ event.feature.getProperty('myfirstproperty') +'<br /> second proporty: '+ event.feature.getProperty('mysecondproperty') + 
     '<br /> last property: '+ event.feature.getProperty('mylastproperty')); 
    infoWindow.setPosition(event.latLng); 
    infoWindow.open(map); 
    });