Google映射infowindow JSON问题

时间:2011-09-20 02:41:45

标签: json google-maps

我最近设置了我的网站的移动版本,并且在移动版本上使用Google Maps V3 infowindows时遇到了一些麻烦。 我试图从我的JSON文件中添加一些数据以显示在infowindows中。我对JSON和javascript也很陌生。 这是我在主桌面站点上为infowindows提供的内容字符串,它完美地运行。

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());
    });
}

为什么普通网站的代码无法正常工作?

2 个答案:

答案 0 :(得分: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());
});

答案 1 :(得分:0)

您只需调用event.feature.getProperty('nameofproperty')即可访问添加为geoJson的google.maps.data图层的数据。其中'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);
    });