Google地图标签的位置 [英] Google map label placement

问题描述

我已经在Google地图中添加了label.但是label出现在marker的中间.我也尝试添加类，但是在标签中添加了labelClass:"my_label"，但是类没有添加.我无法定位label.

I have added label in google map. But the label is coming in the middle of the marker. I have tried to add class also but labelClass:"my_label" in the label but class is not getting added. I'm not getting any way to position label.

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(-25.363882,131.044922),
  map: map,
  title:"Hello World!",
  icon: createMarker(25, 25, 4),
  labelClass:"my_label",
  labelAnchor: new google.maps.Point(15, 65),
  label:{
    text: 'My Place',
    color: '#000',
    fontSize:'14px',
    fontWeight:'bold'
  }
});

小提琴演示

Google地图 labels markers的一侧.我想要这样.

How in google map labels are positioned side of markers. I want like this.

推荐答案

要调整标签的位置，请使用 google.maps.Icon labelOrigin属性:

To adjust the position of the label, use the google.maps.Icon labelOrigin property:

icon: {
  url: createMarker(25, 25, 4),
  labelOrigin: new google.maps.Point(55, 12)
},

标签居中，因此您需要计算正确的偏移量才能使其靠近标记("x"坐标).

The label is centered, so you will need to compute the correct offset to get it next to the marker (the "x" coordinate).

概念证明小提琴

代码段:

var map = new google.maps.Map(document.getElementById("map_canvas"), {
  zoom: 16,
  center: new google.maps.LatLng(-25.363882, 131.044922),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(-25.363882, 131.044922),
  map: map,
  title: "Hello World!",
  icon: {
    url: createMarker(25, 25, 4),
    labelOrigin: new google.maps.Point(55, 12)
  },
  label: {
    text: 'My Place',
    color: '#000',
    fontSize: '14px',
    fontWeight: 'bold'
  }
});

function createMarker(width, height, radius) {
  var canvas, context;
  canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  context = canvas.getContext("2d");
  context.clearRect(0, 0, width, height);
  context.fillStyle = "rgba(255,255,0,1)";
  context.strokeStyle = "rgba(0,0,0,1)";
  context.beginPath();
  context.moveTo(radius, 0);
  context.lineTo(width - radius, 0);
  context.quadraticCurveTo(width, 0, width, radius);
  context.lineTo(width, height - radius);
  context.quadraticCurveTo(width, height, width - radius, height);
  context.lineTo(radius, height);
  context.quadraticCurveTo(0, height, 0, height - radius);
  context.lineTo(0, radius);
  context.quadraticCurveTo(0, 0, radius, 0);
  context.closePath();
  context.fill();
  context.stroke();
  return canvas.toDataURL();
}

html,
body,
#map_canvas {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

这篇关于Google地图标签的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！