Google 用标签映射视网膜标记

Question

我正在使用此代码处理 Google 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 但没有成功。（红色标记是 google 原始标记，不幸的是 google 没有改变标准标记颜色的方法或者有什么可用的方法吗？）

Answer 1

已修复：

icon: {
          url: "http://maps.google.com/mapfiles/kml/paddle/red-blank.png",
          size: new google.maps.Size(32, 42),
          scaledSize: new google.maps.Size(32, 32),
          origin: new google.maps.Point(0, -10),
          anchor: new google.maps.Point(16, 42)
}

对于其他使用该图像的人来说，有很多颜色只需尝试...

Answer 2

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

缩放为 40px x 40px。
它的 anchor 应该在 [20,40]（向右 20 px，在中心，从缩放图像的左上角向下 40 px，在底部）。
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>

Google 用标签映射视网膜标记

Google Maps Retina Marker with Label

javascript

google-maps-api-3

google-maps-markers