Question

我正在使用以下代码处理Google地图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 + ""
          });

图标本身的缩放比例在视网膜显示器上是清晰的。但正如您在此图像上看到的那样，标签不再位于标记的中心。怎么处理？我已经尝试过原点和锚点而没有成功。（红色标记是google原始标记，遗憾的是google还没有一种方法可以更改标准标记的颜色，还是有可用的？）

Answer 1

图标＆＃34; http://maps.google.com/mapfiles/kml/paddle/orange-blank.png＆＃34;是64px x 64px。

缩放为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选项。

代码段

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

修正：

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)
}

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

谷歌地图视网膜标记与标签

2 个答案: