像往常一样使用谷歌地图，有一天标记中文本的字体大小似乎增加了。查了一下，发现是因为最近更新了3.58。我可以暂时返回并使用 3.57，但想知道是否可以在新更新中自定义它。
尝试了以下代码，但大小保持不变
<!doctype html>
<html>
<head>
<title>Simple Map</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
let map;
async function initMap() {
const { Map, InfoWindow } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
// Initialize the map
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: { lat: 1.366546901577395, lng: 103.8065581439425 },
mapId: "DEMO_MAP_ID",
});
const infoWindow = new google.maps.InfoWindow({
content: "",
disableAutoPan: true,
});
// Add markers to the map
const markers = locations.map((position) => {
const label = position.label;
const background = position.backgroundColor || "#FF0000"; // Default background if not provided
const glyphColor = position.glyphColor || "#FFFFFF"; // Default glyph color if not provided
const fontSize = position.fontSize || "16px"; // Custom font size for the marker text
// Create a pin with custom styles
const pinGlyph = new google.maps.marker.PinElement({
glyph: label,
glyphColor: glyphColor, // Text color
scale: 1.5,
background: background, // Background color
});
// Create an AdvancedMarkerElement for the pin
const marker = new google.maps.marker.AdvancedMarkerElement({
position,
content: pinGlyph.element,
});
// Apply custom font size directly to the pin glyph's element
const markerElement = pinGlyph.element;
markerElement.style.fontSize = fontSize; // Change the font size dynamically
// Add event listener for info window on marker click
marker.addListener("click", () => {
infoWindow.setContent(
position.code +
" - " +
position.road +
" " +
position.stop +
"<br>" +
position.lat +
", " +
position.lng
);
infoWindow.open(map, marker);
});
return marker;
});
// Add a marker clusterer to manage the markers
new markerClusterer.MarkerClusterer({ markers, map });
}
// Location data with an optional `fontSize` field for custom font sizes
const locations = [
{
lat: 1.39465386086721,
lng: 103.900462389006,
code: "67259",
road: "Compassvale St",
stop: "B02",
label: "Day A.100",
backgroundColor: "#32a852",
fontSize: "12px",
},
{
lat: 1.38949805550873,
lng: 103.905189999894,
code: "67121",
road: "Sengkang East Way",
stop: "B03",
label: " DayA. -2000 ",
backgroundColor: "#000000",
fontSize: "18px",
},
{
lat: 1.39101786005668,
lng: 103.897780179965,
code: "67181",
road: "Compassvale Rd",
stop: "B06",
label: "A.3",
fontSize: "14px",
},
{
lat: 1.38151407829697,
lng: 103.897492379194,
code: "65019",
road: "Punggol Rd",
stop: "B02",
label: "A.4",
fontSize: "10px",
},
{
lat: 1.38533638989648,
lng: 103.890742156576,
code: "67469",
road: "Sengkang East Rd",
stop: "B01A",
label: "A.5",
fontSize: "14px",
}
// Add other markers here...
];
// Initialize the map
initMap();
</script>
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
</body>
</html>不确定为什么这适用于以前的版本，但不再适用，但解决该问题的一种方法是传递一个 HTML 元素作为您的
glyph<!doctype html>
<html>
<head>
<title>Simple Map</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
let map;
async function initMap() {
const { Map, InfoWindow } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
// Initialize the map
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: { lat: 1.366546901577395, lng: 103.8065581439425 },
mapId: "DEMO_MAP_ID",
});
const infoWindow = new google.maps.InfoWindow({
content: "",
disableAutoPan: true,
});
// Add markers to the map
const markers = locations.map((position) => {
const label = document.createElement('div')
label.innerHTML = position.label
label.style.fontSize = position.fontSize
const background = position.backgroundColor || "#FF0000"; // Default background if not provided
const glyphColor = position.glyphColor || "#FFFFFF"; // Default glyph color if not provided
// Create a pin with custom styles
const pinGlyph = new google.maps.marker.PinElement({
glyph: label,
glyphColor: glyphColor, // Text color
scale: 1.5,
background: background, // Background color
});
const marker = new google.maps.marker.AdvancedMarkerElement({
position,
content: pinGlyph.element,
});
return marker;
});
// Add a marker clusterer to manage the markers
new markerClusterer.MarkerClusterer({ markers, map });
}
// Location data with an optional `fontSize` field for custom font sizes
const locations = [
{
lat: 1.39465386086721,
lng: 103.900462389006,
code: "67259",
road: "Compassvale St",
stop: "B02",
label: "Day A.100",
backgroundColor: "#32a852",
fontSize: "12px",
},
{
lat: 1.38949805550873,
lng: 103.905189999894,
code: "67121",
road: "Sengkang East Way",
stop: "B03",
label: " DayA. -2000 ",
backgroundColor: "#000000",
fontSize: "18px",
},
{
lat: 1.39101786005668,
lng: 103.897780179965,
code: "67181",
road: "Compassvale Rd",
stop: "B06",
label: "A.3",
fontSize: "14px",
},
{
lat: 1.38151407829697,
lng: 103.897492379194,
code: "65019",
road: "Punggol Rd",
stop: "B02",
label: "A.4",
fontSize: "10px",
},
{
lat: 1.38533638989648,
lng: 103.890742156576,
code: "67469",
road: "Sengkang East Rd",
stop: "B01A",
label: "A.5",
fontSize: "14px",
}
// Add other markers here...
];
// Initialize the map
initMap();
</script>
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
</body>
</html>