Как я могу сделать многострочную метку на картах Google при использовании Chrome? - PullRequest
Новая
       36

Как я могу сделать многострочную метку на картах Google при использовании Chrome?

0 голосов
/ 24 февраля 2019

Я делаю систему, которая показывает маркер с текстом (статус, цена, владелец квартиры).Я проверял это на 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
});

1 Ответ

0 голосов
/ 25 февраля 2019

Одним из вариантов будет использование сторонней * служебной библиотеки MarkerWithLabel.Он поддерживает теги HTML в своем поле labelContent (и стиль CSS для labelContent) 

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
});

подтверждение концепции скрипта

screenshot of resulting map

фрагмент кода: 

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>
...