使用 chrome 时如何在谷歌地图上制作多行标签？

Question

我正在制作一个系统，用文本（状态、价格、公寓所有者）显示标记。 我已经使用标签文本在 IE 上对其进行了测试。 它曾经与 /n 一起正常工作以换行。 但是当我更改为 chrome 浏览器时，标签文本的 /n 根本不起作用......我希望这个标签文本是多行的。 有人有想法吗？

我想打印 3 行 aaaaaaa bbbb cccc 的标签

但这不起作用：

var marker2 = new google.maps.Marker({
  title:"A\nBa", 
  position: {
    lat: 12.975688, 
    lng: 77.640812
  }, 
  label: {
    text:"aaaaaaa \n bbbb \n cccc"
  }, 
  icon: { 
    path: google.maps.SymbolPath.CIRCLE, 
    fillColor: "green", 
    strokeColor: "green", 
    fillOpacity: 1.0, 
    scale: 20
  }, 
  map: map
}); 

Answer 1

一种选择是使用第三方MarkerWithLabel 实用程序库。这支持在其labelContent 字段中的 HTML 标记（以及labelContent 的 CSS 样式）

var marker = new MarkerWithLabel({
  position: bangalore,
  labelContent: "A<br/>B",
  labelAnchor: new google.maps.Point(2, 12),
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: "red",
    strokeColor: "red",
    fillOpacity: 1.0,
    scale: 20
  },
  map: map
});

proof of concept fiddle

代码 sn-p：

function initialize() {
  var bangalore = {
    lat: 12.97,
    lng: 77.59
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });
  var marker = new MarkerWithLabel({
    position: bangalore,
    labelContent: "aaaaaaa <br/> bbbb <br/> cccc",
    labelAnchor: new google.maps.Point(20, 20),
    labelStyle: {
      textAlign: "center"
    },
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: "red",
      strokeColor: "red",
      fillOpacity: 1.0,
      scale: 20
    },
    map: map
  })
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/geocodezip/v3-utility-library/packages/markerwithlabel/src/markerwithlabel.js"></script>