在Google Map标记中添加多个标签

时间:2018-09-25 08:05:03

标签: javascript google-maps google-maps-api-3

在Google地图上创建标记时,我需要在标记图像的中心和标记下方的地名标签上显示一个类似(1)的数字,并在标记和地名标签之间留出一些空格。我已经在标记下方找到了地名标签,但是我找不到如何在标记图像的中心放置数字。所以基本上我想在每个标记上提供两个标签。预先谢谢你。

function createMarker(data, i) {
    
    if(onCountry) {
      var result = {lat: data[i].lat, lng: data[i].long};
      marker = new google.maps.Marker({
        position: result,
        map: map,
        data: data[i].name,
        icon: purpleIcon
      });
      countryArray.push(marker);
    } else {
      var result = {lat: data[i].lat, lng: data[i].long};
      marker = new google.maps.Marker({
        position: result,
        map: map,
        data: data[i].name,
        icon: {
          url: purpleIcon,
          labelOrigin: new google.maps.Point(17, 52)
        },
        labelClass:"my_label",
        label: {
          text: data[i].name,
          color: '#000',
          fontSize:'12px',
          fontWeight:'normal'
        }
      });
      allMarkerArray.push(marker);
    }
    
  }

1 个答案:

答案 0 :(得分:0)

您可以使用https://github.com/googlemaps/js-map-label中的MapLabel类来添加多重标签。对于位置,您只需根据需要修改标记的latLang。

var mapLabel = new MapLabel({
  text: placeName,
  position: latLngBelowMarker,
  map: map,
  fontSize: 20,
  align: 'right'
});

通过将标记添加到标记而无需任何选择,可以很容易地归档标记中心的一个标签。

var marker = new google.maps.Marker({
          position: location,
          label: '1',
          map: map
       });