Google Maps:自定义标记图标-不在矩形中心绘图 [英] Google Maps: Custom Marker Icon - Not plotting at Center of Rectangle

问题描述

尝试绘制边界为lat/lng的矩形区域，并在该区域的中心绘制一个标记，当我使用末端逐渐变细的google maps默认图标时，它会在放大时停留在矩形上/缩小.但是使用自定义图标时，它不会粘贴到矩形区域.请检查小提琴:

Trying to plot a rectangle area with bounds lat/lng, also plotting a marker at the center of the area, when i use the default icon of google maps which is tapering at the end, it sticks to the rectangle on zoom in /zoom out. but when using a custom icon then it does not stick to the rectangle area. please check the fiddles:

默认标记: https://jsfiddle.net/8mQ6G/473/

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

使自定义图标在其他位置显示的原因取决于它的左侧还是右侧，因为如果它不像默认图标那样居中，它将始终偏离精确的经度/纬度.请建议是否有解决此问题的方法.

What makes the custom icon plot elsewhere depends on the base of the icon if its to the left or right, since if its not in the center like the default one it will always be away form the exact lat/lng. Please suggest is there any solution to this issue.

推荐答案

请参阅

复杂的图标

您可能想要指定复杂的形状以指示可单击的区域，并指定图标相对于其他叠加层的显示方式(它们的堆叠顺序").以这种方式指定的图标应将其图标属性设置为Icon类型的对象.

You may want to specify complex shapes to indicate regions that are clickable, and specify how the icons should appear relative to other overlays (their "stack order"). Icons specified in this manner should set their icon properties to an object of type Icon.

图标对象定义图像.它们还定义了图标的大小，图标的原点(例如，如果所需图像是子画面中较大图像的一部分)以及图标热点应位于的锚点(即基于原点).

Icon objects define an image. They also define the size of the icon, the origin of the icon (if the image you want is part of a larger image in a sprite, for example), and the anchor where the icon's hotspot should be located (which is based on the origin).

您可以将锚点设置到图标上您希望放置在该位置的任何位置(通常是气泡"图标的尖端，但对于"i"，我想您会希望该图标的底部"i"，距离图片底部的中心约4个像素:

You can set the anchor to whatever position on the icon you would like placed at the location (usually the tip of a "bubble" icon, but for the "i" I would think you would want the bottom of the "i" which is ~4 pixels from the bottom of the image in the center:

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

概念提琴证明

代码段:

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 Maps:自定义标记图标-不在矩形中心绘图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！