当两个标记彼此靠近时，标记标签会重叠.如何为Google Maps标记赋予背景颜色?

问题描述

我正在使用Google Maps版本3 API和Google Maps标记.当标记彼此靠近时，标签会重叠并且看起来很糟.我试图将背景颜色赋予标记标签，但Google Maps标记标签似乎没有背景颜色属性.我尝试使用MarkerWithLabel api，但与Google地图默认的Marker Label相比，当我有1000多个标记时，渲染速度较慢.我包括了js小提琴.谁能帮我这个忙吗?

I am using google maps version 3 api and google maps marker. When the markers are close to each other the labels overlap and it looks bad. I was trying to give background color to the marker label but google maps marker label does not seem to have background color property. I tried using MarkerWithLabel api but rendering was slower when I had 1000s of markers compared to google maps deafult Marker Label. I have included the js fiddle. Can anyone please help me with this ?

https://jsfiddle.net/dcvc99qz/12/

function initMap() {
    var pointA = new google.maps.LatLng(51.2750, 1.0870),
        pointB = new google.maps.LatLng(51.2750, 0.8140),
        myOptions = {
            zoom: 5,
            center: pointA,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
        markerA = new google.maps.Marker({
            position: pointA,
            title: "point A",
            label: "AA",
            map: map
        }),
        markerB = new google.maps.Marker({
            position: pointB,
            title: "point B",
            label: "BB",
            map: map
        });

}

initMap();

推荐答案

标记只是图像，您不能仅更改其背景颜色，而必须定义一个新图标.首先，准备具有正确颜色的新透明图像.然后创建新的图标定义.

Markers are just images, you can't just change its background color, you have to define a new icon. First, prepare new transparent images with right colors. Then create new icon definitions.

var icons = {
  green: {
      // link to an image, use https if original site also uses https
      url: 'https://i.imgur.com/5Yd25Ga.png',

      // set size of an image
      size: new google.maps.Size(22, 40),

      // if an image is a sprite, set its relative position from 0, 0
      origin: new google.maps.Point(0, 0),

      // part of an image pointing on location on the map
      anchor: new google.maps.Point(11, 40),

      // position of text label on icon
      labelOrigin: new google.maps.Point(11, 10)
      },
  red: {
      // ...
      }
};

图标属性的文档

添加新标记时，将其图标设置为已定义的图标之一.

When adding new marker set its icon to one of defined icons.

markerB = new google.maps.Marker({
    position: pointB,
    title: "point B",
    label: "BB",
    icon: icons.green,
    map: map
});

当点彼此靠近时，您会注意到文本标签是重叠的.要解决此问题，请在每个标记中添加递增的zIndex.

When points are close to each other, you will notice that text labels are overlapping. To fix it, add increasing zIndex to every marker.

markerA = new google.maps.Marker({
    position: pointA,
    title: "point A",
    label: "AA",
    zIndex: 1000,
    icon: icons.red,
    map: map
});

markerB = new google.maps.Marker({
  position: pointB,
  title: "point B",
  label: "BB",
  zIndex: 1001,
  icon: icons.green,
  map: map
});

完整的示例: jsfiddle.net/yLhbxnz6/

这篇关于当两个标记彼此靠近时，标记标签会重叠.如何为Google Maps标记赋予背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！