我正在从数组添加标记到谷歌地图,所有标记都具有相同的样式和两种不同的字体大小。其中两个标记看起来比其他标记更薄,风格相同。
在下面的页面中,标记'Klong Kong'和'Ban Thung'与相同款式/尺寸的其他标记相比更薄。如果我更改标记文字,例如'Klong Kong'到'Klong Kongx'它呈现得很好,似乎特定的标记文字正在引起我的问题。
示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST MAP</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
background: #fff;
}
#map {
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
(function () {
window.onload = function () {
var options = {
zoom: 13,
center: new google.maps.LatLng(7.553697, 99.06302),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById('map'), options);
var textBig = '20';
var textSmall = '14';
var locations = [
['Ban Saladan', 7.651093922, 99.03995, 1, textBig],
['Klong Dao', 7.63408027, 99.0269495, 1, textBig],
['Phra Ae', 7.612178, 99.031062, 1, textBig],
['Klong Khong', 7.574728, 99.033068, 1, textBig],
['Klong Toab', 7.565497, 99.040943, 1, textBig],
['Klong Nin', 7.538923, 99.048078, 1, textBig],
['Klong Hin', 7.519017, 99.058989, 1, textBig],
['Ba Kantiang Bay', 7.49551, 99.074525, 1, textBig],
['Nui Bay', 7.488632, 99.079278, 1, textSmall],
['Klong Jaak Bay', 7.486043, 99.083451, 1, textSmall],
['Mai Phai Bay', 7.480503, 99.088885, 1, textSmall],
['Ban Thung', 7.63694, 99.111174, 1, textSmall],
['Ban Loh Yai', 7.609017, 99.123346, 1, textSmall]
]
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'http://chart.googleapis.com/chart?chst=d_text_outline&chld=ffffff|' + location[4] + '|l|000000|b|' + location[0],
title: location[0],
zIndex: location[3]
});
}
};
})();
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>