【发布时间】：2019-12-13 15:17:51
【问题描述】：
由于我公司的一位客户要求标记图像上的 alt 属性，我遇到了 google maps API 的问题。
我在 Google 官方文档中找不到任何内容（即：https://developers.google.com/maps/documentation/javascript/custom-markers），甚至在其他地方也找不到任何关于 google maps 标记的 alt 文本的信息。
就个人而言，我什至不知道它是否对 SEO 有影响（正如客户提到的第三方公司所说，因为他们在他们的网站上进行了一些 SEO 检查）。
我尝试使用来自 google 的示例并尝试添加一个假设的 alt 指令，但当然没有被采纳。
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = { lat: -25.344, lng: 131.036 };
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), { zoom: 4, center: uluru });
// The marker, positioned at Uluru
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru',
alt: 'my alternate text goes here'
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=***********************&callback=initMap" async defer></script>
</body>
</html>
渲染后的结果类似如下：
<img alt="" src="https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png" draggable="false" usemap="#gmimap0" style="position: absolute; left: 0px; top: 0px; width: 27px; height: 43px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; opacity: 1;">
有什么办法可以得到类似的东西：
<img alt="my alternate text goes here" src="https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png" draggable="false" usemap="#gmimap0" style="position: absolute; left: 0px; top: 0px; width: 27px; height: 43px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; opacity: 1;">
更新：
【问题讨论】：
-
从上面的链接可以看出，地图存在不少可访问性问题。也就是说，我认为标记图像上缺少 alt 标签不会对网站的全球 SEO 产生（任何）影响。如果这是目标，还有其他方法可以以某种方式“引用”页面上的这些标记。听起来另一家公司只是进行了 SEO 检查，并在没有太多解释的情况下发送了结果......
标签： html google-maps google-maps-api-3 seo