Как добавить текст / метку на мою карту в angular -тексте без использования маркера? - PullRequest
Новая
       8

Как добавить текст / метку на мою карту в angular -тексте без использования маркера?

0 голосов
/ 06 февраля 2020

Я использую agm-карту в angular. Мне нужно добавить одну метку / текст в центр моего многоугольника на карте. Как я могу реализовать это в Typescript без использования маркера?

Я пытался сделать это с помощью MapLabel Utility. Посмотрите на приведенный ниже код. 

label: new MapLabel({
    text: result[index].name,
    position: new google.maps.LatLng(object.lat, object.lng),
    fontSize: 10,
    fontColor: #000,
    labelInBackground: true,
    strokeColor: #000,
    map: map
})

Я также сослался ниже по ссылке https://codepen.io/adg29/pen/reGaPd

Заранее спасибо.

1 Ответ

0 голосов
/ 11 февраля 2020

Сначала необходимо получить координаты центра многоугольника и использовать его в качестве значения для координат вашей метки. Чтобы получить центр многоугольника, я следовал за ответом из этого SO post , а затем использовал координаты в качестве значения ll в labelOverlay.

Чтобы объяснить: Сначала я заметил, что вы создали labelOverlay перед полигоном. Таким образом, чтобы получить координату центра многоугольника, вам нужно переместить многоугольник перед меткой наложения.

Затем вы добавите фрагмент кода из сообщения SO, чтобы передать каждую точку многоугольника в LatLngBounds Объект через метод extend ().

Получите центр границ и используйте его в качестве значения ll в вашем labelOverlay.

Ниже приведен фрагмент кода, который должен выглядеть подобно. Вы также можете увидеть рабочую скрипку здесь . 

 // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < triangleCoords.length; i++) {
  bounds.extend(triangleCoords[i]);
}

var polygonCenter = bounds.getCenter();

var overlay1 = new LabelOverlay({
    ll      : polygonCenter,
    //minBox    : box,

    minBoxH     : 0.346,
    minBoxW     : 1.121,

    maxBoxH     : 0.09,
    maxBoxW     : 0.3,

    //className : 'small',

    debugBoxes  : true,
    debugVisibility : true,

    maxZoom     : 10,
    minZoom     : 6,
    label       : "Hello world",
    map     : map
});
...