Question

尝试绘制带有区域lat / lng的矩形区域，同时在区域的中心绘制标记，当我使用最终逐渐变细的谷歌地图的默认图标时，它会在放大时粘在矩形上/缩小。但是当使用自定义图标时，它不会粘在矩形区域上。请检查小提琴：

    var myPos = new google.maps.LatLng(47.56715, -122.1556);
    var marker = new google.maps.Marker({
        position: myPos,
        //icon: "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png",
        map: map
      });

 var rectangle = new google.maps.Rectangle({
   strokeColor: '#FF0000',
   strokeOpacity: 0.8,
   strokeWeight: 2,
   fillColor: '#ffffff',
   fillOpacity: 0.35,
   map: map,
   bounds: new google.maps.LatLngBounds(
   new google.maps.LatLng(47.5204, -122.2047),
   new google.maps.LatLng(47.6139, -122.1065))
 });

自定义标记： https://jsfiddle.net/8mQ6G/472/

    var myPos = new google.maps.LatLng(47.56715, -122.1556);
    var marker = new google.maps.Marker({
        position: myPos,
        icon: "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png",
        map: map
      });

 var rectangle = new google.maps.Rectangle({
   strokeColor: '#FF0000',
   strokeOpacity: 0.8,
   strokeWeight: 2,
   fillColor: '#ffffff',
   fillOpacity: 0.35,
   map: map,
   bounds: new google.maps.LatLngBounds(
   new google.maps.LatLng(47.5204, -122.2047),
   new google.maps.LatLng(47.6139, -122.1065))
 });

在其他地方制作自定义图标的原因取决于图标的底部（如果它位于左侧或右侧），因为如果它不在默认位置的中心，它将始终远离精确的纬度/经度。请建议是否有解决此问题的方法。

Answer 1

请参阅complex custom markers in the documentation的讨论。

复杂图标

您可能希望指定复杂形状以指示可单击的区域，并指定图标相对于其他叠加层的显示方式（它们的“堆叠顺序”）。以这种方式指定的图标应将其图标属性设置为Icon类型的对象。

图标对象定义图像。它们还定义了图标的大小，图标的原点（例如，如果您想要的图像是精灵中较大图像的一部分），图标的热点应该位于的锚点（这是基于原点）。

您可以将锚设置到您想要放置在该位置的图标上的任何位置（通常是“气泡”图标的尖端，但对于“i”，我认为您会想要“i”的底部“距离中心图像底部约4个像素：

 var marker = new google.maps.Marker({
   position: myPos,
   icon: {
     url: "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png",
     anchor: new google.maps.Point(16, 28)
   },
   map: map
 });

proof of concept fiddle

代码段

function initialize() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: new google.maps.LatLng(47.53772, -122.1153),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var myPos = new google.maps.LatLng(47.56715, -122.1556);
  var marker = new google.maps.Marker({
    position: myPos,
    icon: {
      url: "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png",
      // referenced to the upper left hand corner of the image, in pixels
      // the image is 32 x 32, this is in the center 4 pixels from the bottom
      anchor: new google.maps.Point(16, 28)
    },
    map: map
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#ffffff',
    fillOpacity: 0.35,
    map: map,
    bounds: new google.maps.LatLngBounds(
      new google.maps.LatLng(47.5204, -122.2047),
      new google.maps.LatLng(47.6139, -122.1065))
  });
}

initialize();

html,
body,
#map {
  height: 100%;
  width: 100%;
  border: 6px solid #dedede;
  margin: 0 auto;
}

<title>Google Maps JavaScript API v3 Example: Rectangle Simple</title>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Google地图：自定义标记图标 - 不在矩形中心绘图

1 个答案: