Google Maps 3.15只能显示一个标记

时间:2014-09-10 15:44:00

标签: javascript google-maps google-maps-api-3

最近,我在使用Google地图版本3.16显示多个标记时出现问题。在做了一些研究之后I saw that versions 3.16 and greater had issues displaying markers,所以我回到了3.15。

我现在发现版本3.15不再显示带标签的多个标记。

我在init javascript函数中创建地图:

TripMap.map = new google.maps.Map($('#tripMap')[0], mapOptions);

然后在后面的方法中,我创建一组lats和longs并创建MarkerWithLabels:

//Lat Lngs will eventuall be needed for all coords
var originLatLng = new google.maps.LatLng(result.resultVal.oycord, result.resultVal.oxcord);
var boardLatLng = new google.maps.LatLng(result.resultVal.bycord, result.resultVal.bxcord);
var alightLatLng = new google.maps.LatLng(result.resultVal.aycord, result.resultVal.axcord);
var destinationLatLng = new google.maps.LatLng(result.resultVal.dycord, result.resultVal.dxcord);

//Create marker labels
makePathPointLabel = function (coordinate, labelContent, colorCode) {
    return new MarkerWithLabel({
        position: coordinate,
        map: TripMap.map,                          
        labelAnchor: new google.maps.Point(5, 50),
        labelStyle: {
            'color': '#000',
            'fontWeight': 'bold'
        },
        icon: {
            url:'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=' + labelContent + '|' + colorCode + '|000000'
        }
    });
}

//Create map markers, each with a different colors. Colors are hard coded, and have no meaning other than making
// the map "pop" more at this point. May want to add options to change colors in the future. 
TripMap.originMarker = makePathPointLabel(originLatLng, "O", '008000');
TripMap.destinationMarker = makePathPointLabel(destinationLatLng, "D", 'FF0000');
TripMap.boardMarker = makePathPointLabel(boardLatLng, "B", '008000');
TripMap.alightMarker = makePathPointLabel(alightLatLng, "A", 'FF0000');

//Sets the zoom level of the google map to incorporate all four of the trip place markers
var bounds = new google.maps.LatLngBounds();
bounds.extend(originLatLng);
bounds.extend(boardLatLng);
bounds.extend(alightLatLng);
bounds.extend(destinationLatLng);
TripMap.map.fitBounds(bounds);

var tripPathLegend = document.getElementById('tripPathLegend');
tripPathLegend.index = 1;

TripMap.map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(tripPathLegend);

我已经确认了这些坐标彼此不同,并且有效。我还验证了我实际上正在加载api的3.15版本。

有什么建议吗?

编辑我在上面添加了更多代码。在地图上显示标记后,我对标记无效。 Here is an example marker(它们都正确生成)。我也在使用MarkerWithLabel v1.1.7

0 个答案:

没有答案