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

Posted 2023-03-28

【中文标题】使用 chrome 时如何在谷歌地图上制作多行标签？

【英文标题】：How can I make multi line label on google maps when using chrome?

【发布时间】：2019-07-18 03:48:51

【问题描述】：

我正在制作一个系统，用文本（状态、价格、公寓所有者）显示标记。 我已经使用标签文本在 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
); 

【问题讨论】：

你必须使用 html 的

而不是 \n

【参考方案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>

【讨论】：

链接好像坏了

Google 一直在移动这些库。将答案更改为在 geocodezip github 帐户中使用分叉。