javascript - 带标签的谷歌地图视网膜标记

Question

我正在使用以下代码处理 Google Maps for Retina:

var marker = new google.maps.Marker({
              position: new google.maps.LatLng(lat, lon),
              title: title,
              map: map,
              id: id,
              icon: {
                  url: "http://maps.google.com/mapfiles/kml/paddle/orange-blank.png",
                  size: new google.maps.Size(64, 64),
                  scaledSize: new google.maps.Size(40, 40),
                  origin: new google.maps.Point(0, 0),
                  anchor: new google.maps.Point(0, 0)
              },
              label: level + ""
          });

Icon 本身是按比例缩放的，它在 Retina 显示器上很清晰。但是正如您在此图像上看到的那样，标签不再位于标记的中心。如何处理？我已经尝试过 origin 和 anchor 但没有成功。 (红色标记是谷歌原始标记，不幸的是谷歌没有改变标准标记颜色的方法或者有什么可用的方法吗？)

Answer 1

• 图标“http://maps.google.com/mapfiles/kml/paddle/orange-blank.png”为 64 像素 x 64 像素。

• 缩放到 40px x 40px。
• 它的 anchor应该在 [20,40](右 20 像素，在中心，从缩放图像的左上角向下 40 像素，在底部)。
• labelAnchor应位于 [20, 12](向右 20 像素，在中心，从顶部向下 12 像素)。

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lon),
  title: title,
  map: map,
  id: id,
  icon: {
    url: "http://maps.google.com/mapfiles/kml/paddle/orange-blank.png",
    size: new google.maps.Size(64, 64),
    scaledSize: new google.maps.Size(40, 40),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(20, 40),
    labelOrigin: new google.maps.Point(20,12)
  },
  label: level + ""
});

• 如果你想在自定义标记上打开一个信息窗口，你还需要设置 anchorPoint标记的选项。

代码片段:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var title = "title";
  var id = "id";
  var level = 2;
  var lat = map.getCenter().lat();
  var lon = map.getCenter().lng();
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lon),
    title: title,
    map: map,
    id: id,
    icon: {
      url: "http://maps.google.com/mapfiles/kml/paddle/orange-blank.png",
      size: new google.maps.Size(64, 64),
      scaledSize: new google.maps.Size(40, 40),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(20, 40),
      labelOrigin: new google.maps.Point(20, 12)
    },
    label: level + "",
    anchorPoint: new google.maps.Point(0, -40)
  });
  var infowindow = new google.maps.InfoWindow();
  infowindow.setContent(marker.getPosition().toUrlValue(6));
  infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, "load", initialize);

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

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