javascript - 谷歌地图标签放置

Question

我在谷歌地图中添加了label。但是 label 出现在 marker 的中间。我也尝试添加类，但 labelClass:"my_label" 在标签中，但类没有被添加。我无法定位 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'
  }
});

Fiddle Demo

如何在 google map labels 位于markers 的一侧。我想要这样。

Answer 1

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

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

标签居中，因此您需要计算正确的偏移量以使其靠近标记(“x”坐标)。

proof of concept fiddle

代码片段:

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>