【发布时间】：2019-05-09 23:09:05
【问题描述】：
我制作了一张地图，从我的 json 文件中调用了多个数据点破坏我的地图或弄乱坐标？
目前，第一个标签有效并且位于正确的位置，但我尝试初始化它的第二种方式甚至不起作用，据我的研究表明，它必须如何布局才能添加样式.
尝试向初始标签添加样式会阻止整个地图的显示。
尝试在看到的格式中添加标签甚至无法显示文本
//stores Google Map object and the JSON called from PHP
var map;
var locations;
var markers;
function initMap() {
// creates the map and puts it in the html giving its zoom and position
map = new google.maps.Map(document.getElementById('map'),
{
center: {
lat: 51.0590282,
lng: -1.3104568},
zoom: 9
});
$.getJSON(
//URL for my php script
'http://up858296.ct.port.ac.uk/ParkRun/ParkrunJson.php',
function(jsonData) {
// putting jason data under variable location
locations = jsonData;
locations.forEach(
function(loc) {
// gets objects which arent in my JSON
loc.map = map;
if (loc.gender == "Male") {
loc.icon.url = 'Man.png';
} else {
loc.icon.url = 'Women.png';
}
loc.icon.scaledSize = new google.maps.Size(40, 40);
loc.icon.labelOrigin = new google.maps.Point(10, 50);
loc.title = "Parkrun: " + loc.parkrun + ", Runner: " + loc.name + ", Time: " + loc.duration;
//fist label that displays but cant add style
loc.label = loc.name + ", Time:" + loc.duration;
//creates marker on google map named "loc"
// "loc" stores lat, lng ect
var marker = new google.maps.Marker(loc);
// Add listener for a click event upon which will open url for parkrun sites.
marker.addListener(
'click',
function() {
window.open(loc.link);
}
);
//initialise styled map label overlay (second lable wont even display text)
/*var m = new google.maps.Marker({
position: loc,
label: {
text: loc.name + ", Time:" + loc.duration,
color: 'white',
fontWeight: 'bold',
},
})*/
}
);
}
);
};
【问题讨论】：
标签： javascript php json google-maps