谷歌用多个字符映射标记标签 [英] Google maps Marker Label with multiple characters

问题描述

我正在尝试向 Google 地图标记添加一个 4 个字符的标签(例如A123")，该标记具有使用自定义路径定义的宽图标.

var marker = new google.maps.Marker({位置:经纬度，标签:{文本:'A123'}，地图:地图，图标: {path: '自定义图标路径',填充颜​​色:'#000000'，labelOrigin: 新的 google.maps.Point(26.5, 20),锚点:新 google.maps.Point(26.5, 43)规模:1，}});

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

我提出了一个 Google 地图问题要求取消此限制.请考虑通过访问上面的链接为 Google 问题投票并为该问题加注星标以鼓励 Google 修复它 - 谢谢！

但与此同时，是否有一种解决方法可以用来消除单字符限制?

有没有办法创建 google.maps.Marker 的自定义扩展来显示更长的标签?

解决方案

您可以将 MarkerWithLabel 与 SVG 图标一起使用.

更新:Google Maps Javascript API v3 现在原生支持 标记标签

概念证明小提琴(你没有提供你的图标，所以我做了一个)

注意:重叠标记上的标签存在一个问题，此修复，归功于 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'), {缩放:12，中心:纬度，mapTypeId: google.maps.MapTypeId.ROADMAP});var 标记 = 新 MarkerWithLabel({位置:homeLatLng，地图:地图，可拖动:真实，raiseOnDrag: 真,labelContent: "ABCD",labelAnchor: 新的 google.maps.Point(15, 65),labelClass: "labels",//标签的 CSS 类标签背景:假，图标:pinSymbol('红色')});var iw = new google.maps.InfoWindow({内容:《待售房屋》});google.maps.event.addListener(marker, "click", function(e) {iw.open(map, this);});}功能 pinSymbol(颜色){返回 {路径:'M 0,0 C -2,-20 -10,-2​​2 -10,-30 A 10,10 0 1,1 10,-30 C 10,-2​​2 2,-20 0,0 z',填充颜​​色:颜色，填充不透明度:1，strokeColor: '#000',行程重量:2，规模:2};}google.maps.event.addDomListener(window, 'load', initMap);

html,身体，#map_canvas {高度:500px；宽度:500px；边距:0px；填充:0px}.标签 {白颜色;背景颜色:红色；字体系列:Lucida Grande"、Arial"、无衬线字体；字体大小:10px；文本对齐:居中；宽度:30px；空白: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>

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>

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