使用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

代码段：

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/googlemaps/v3-utility-library@master/markerwithlabel/src/markerwithlabel.js"></script>