Google将标记标签映射为多个字符 [英] Google maps Marker Label with multiple characters

问题描述

我试图给Google地图标记添加一个4个字符的标签（例如'A123'），该标记有一个用自定义路径定义的宽图标。

  var marker = new google.maps.Marker（{
 position：latLon，
 label：{text：'A123'}，
 map：地图，
图标：{
路径：'custom icon path'，
 fillColor：'＃000000'，
 labelOrigin：new google.maps.Point（26.5 ，20），
 anchor：new google.maps.Point（26.5，43）
 scale：1，
} 
}）; 
  

marker label API 仅限于单个字符，所以在上例中仅显示带'A'的标记。我曾尝试使用Chrome开发人员工具来破解由gmaps创建的html并恢复较长的标签。它显示完美无需修改所需的CSS，所以我只需要找到一种方法来恢复谷歌地图已剥离其他标签字符。

我提出了一个< href =https://code.google.com/p/gmaps-api-issues/issues/detail?id=8578 =noreferrer> Google地图问题，要求解除此限制。请考虑投票处理谷歌问题，访问上面的链接，并主题解决问题，以鼓励Google解决它 - 谢谢！

但是在此期间，是否有解决方法用来删除一个字符限制？

有没有一种方法可以创建google.maps.Marker的自定义扩展程序来显示我的较长标签？

更新： Google Maps JavaScript API v3现在本机支持 MarkerLabel 中的多个字符

概念证明小提琴（您没有提供您的图标，所以我做了一个）

注意：重叠标记上的标签存在问题，由此修复程序，称为 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，/ /标签的CSS类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;宽度：500px; margin：0px; padding：0px} .labels {color：white;背景颜色：红色; font-family：Lucida Grande，Arial，无衬线字体; font-size：10px; text-align：center;宽度：30px; < 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_canvasstyle =height：400px; width：100％; >< / div>  

I am trying to add a 4 character label (eg 'A123') to a Google Maps marker which has a wide icon defined with a custom 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,
  }
});

The marker label API is restricted to a single character, so just shows a marker with 'A' in the example above. I have tried using chrome developer tools to hack the html which is created by gmaps and reinstate the longer label. It displays perfectly with no modifications to the css required, so I just need to find a way to reinstate the other label chars which Google maps has stripped.

I raised a Google Maps Issue to request that this restriction be lifted. Please consider voting for the Google issue by visiting link above and starring the issue to encourage Google to fix it - thanks!

But in the meantime, is there a workaround I can use to remove the one char restriction?

Is there a way I can create a custom extension of google.maps.Marker to show my longer label?

解决方案

You can use MarkerWithLabel with SVG icons.

Update: The Google Maps Javascript API v3 now natively supports multiple characters in the MarkerLabel

proof of concept fiddle (you didn't provide your icon, so I made one up)

Note: there is an issue with labels on overlapping markers that is addressed by this fix, credit to robd who brought it up in the comments.

code snippet:

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>

这篇关于Google将标记标签映射为多个字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！