Google将标记标签映射到多个字符
我正在试图添加一个4个字符的标签（例如'A123'）到一个Google地图标记上，这个标记有一个用自定义path定义的宽图标。
var marker = new google.maps.Marker({ position: latLon, label: { text: 'A123' }, map: map, icon: { path: 'custom icon path', fillColor: '#000000', labelOrigin: new google.maps.Point(26.5, 20), anchor: new google.maps.Point(26.5, 43) scale: 1, } }); 标记标签API仅限于单个字符，因此在上例中仅显示带有“A”的标记。 我曾尝试使用Chrome开发人员工具来破解由gmaps创build的html，并恢复较长的标签。 它显示完美无需修改所需的CSS，所以我只需要find一种方法来恢复谷歌地图已经剥夺其他标签字符。
我提出了Google地图问题 ，要求解除这个限制。 请考虑投票谷歌问题，访问上面的链接，并主要问题，以鼓励谷歌修复它 – 谢谢！
但在此期间，有没有一种解决方法，我可以用来删除一个字符限制？
有没有一种方法可以创build一个自定义的google.maps.Marker扩展来显示我的更长的标签？
您可以使用MarkerWithLabel和SVG图标。
更新： Google Maps JavaScript API v3现在本身支持MarkerLabel中的多个字符
概念certificate小提琴 （你没有提供你的图标，所以我做了一个）
注意： 这个修复程序解决了重叠标记上的标签存在问题， 相当于在评论中提到的robd 。
代码片段：
function initMap() { var latLng = new google.maps.LatLng(49.47805, -123.84716); var homeLatLng = new google.maps.LatLng(49.47805, -123.84716); var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 12, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker = new MarkerWithLabel({ position: homeLatLng, map: map, draggable: true, raiseOnDrag: true, labelContent: "ABCD", labelAnchor: new google.maps.Point(15, 65), labelClass: "labels", // the CSS class for the label labelInBackground: false, icon: pinSymbol('red') }); var iw = new google.maps.InfoWindow({ content: "Home For Sale" }); google.maps.event.addListener(marker, "click", function(e) { iw.open(map, this); }); } function pinSymbol(color) { return { path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z', fillColor: color, fillOpacity: 1, strokeColor: '#000', strokeWeight: 2, scale: 2 }; } google.maps.event.addDomListener(window, 'load', initMap);
html, body, #map_canvas { height: 500px; width: 500px; margin: 0px; padding: 0px } .labels { color: white; background-color: red; font-family: "Lucida Grande", "Arial", sans-serif; font-size: 10px; text-align: center; width: 30px; white-space: nowrap; }
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script> <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script> <div id="map_canvas" style="height: 400px; width: 100%;"></div>
首先，感谢代码作者！
我发现下面的链接，而谷歌search，这是非常简单，效果最好。 永远不会失败，除非SVG被弃用。
http://codepen.io/moistpaint/pen/ywFDe/
这里的代码中有一些js加载错误，但它提供的codepen.io链接完美工作。
var mapOptions = { zoom: 16, center: new google.maps.LatLng(-37.808846, 144.963435) }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var pinz = [ { 'location':{ 'lat' : -37.807817, 'lon' : 144.958377 }, 'lable' : 2 }, { 'location':{ 'lat' : -37.807885, 'lon' : 144.965415 }, 'lable' : 42 }, { 'location':{ 'lat' : -37.811377, 'lon' : 144.956596 }, 'lable' : 87 }, { 'location':{ 'lat' : -37.811293, 'lon' : 144.962883 }, 'lable' : 145 }, { 'location':{ 'lat' : -37.808089, 'lon' : 144.962089 }, 'lable' : 999 }, ]; for(var i = 0; i <= pinz.length; i++){ var image = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2238%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%3E%3Cpath%20fill%3D%22%23808080%22%20stroke%3D%22%23ccc%22%20stroke-width%3D%22.5%22%20d%3D%22M34.305%2016.234c0%208.83-15.148%2019.158-15.148%2019.158S3.507%2025.065%203.507%2016.1c0-8.505%206.894-14.304%2015.4-14.304%208.504%200%2015.398%205.933%2015.398%2014.438z%22%2F%3E%3Ctext%20transform%3D%22translate%2819%2018.5%29%22%20fill%3D%22%23fff%22%20style%3D%22font-family%3A%20Arial%2C%20sans-serif%3Bfont-weight%3Abold%3Btext-align%3Acenter%3B%22%20font-size%3D%2212%22%20text-anchor%3D%22middle%22%3E' + pinz[i].lable + '%3C%2Ftext%3E%3C%2Fsvg%3E'; var myLatLng = new google.maps.LatLng(pinz[i].location.lat, pinz[i].location.lon); var marker = new google.maps.Marker({ position: myLatLng, map: map, icon: image }); }
html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px }
<div id="map-canvas"></div> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDtc3qowwB96ObzSu2vvjEoM2pVhZRQNSA&signed_in=true&callback=initMap&libraries=drawing,places"></script>
好的，这里是我提出的一个解决scheme，很搞砸了。
我使用fontFamily标签属性将完整的标签文本走私到div中。 然后，我使用querySelectorAll来匹配生成的样式属性，以便在地图加载后拉出refs并重写标签：
var label = "A123"; var marker = new google.maps.Marker({ position: latLon, label: { text: label, // Add in the custom label here fontFamily: 'Roboto, Arial, sans-serif, custom-label-' + label }, map: map, icon: { path: 'custom icon path', fillColor: '#000000', labelOrigin: new google.maps.Point(26.5, 20), anchor: new google.maps.Point(26.5, 43) scale: 1 } }); google.maps.event.addListener(map, 'idle', function() { var labels = document.querySelectorAll("[style*='custom-label']") for (var i = 0; i < labels.length; i++) { // Retrieve the custom labels and rewrite the tag content var matches = labels[i].getAttribute('style').match(/custom-label-(A\d\d\d)/); labels[i].innerHTML = matches[1]; } });
这看起来很脆弱。 有什么办法可怕吗？
从API版本3.26.10开始，可以将标记标签设置为多个字符。 限制解除了。
试试吧，它的工作原理！
此外，使用MarkerLabel对象而不是仅仅一个string，您可以设置外观的一些属性，如果使用自定义图标，可以设置labelOrigin属性来重新定位标签。
资料来源： https ： //code.google.com/p/gmaps-api-issues/issues/detail？id = 8578＃c30 （同样，你可以在上面的链接线程中报告任何与此有关的问题）
这个问题的一个更简单的解决scheme，允许字母，数字和单词作为标签是下面的代码。 更具体地说，以“icon：”开头的代码行。 任何string或variables都可以replace为'k'。
for (i = 0; i < locations.length; i++) { k = i + 1; marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + k + '|FF0000|000000' });
— locations数组保存lat和long，k是我映射的地址的行号。 换句话说，如果我有一个100个地址来映射我的标记标签将是1到100。
