谷歌地图:自定义标记图标-不在矩形中心绘制

Google Maps: Custom Marker Icon - Not plotting at Center of Rectangle

本文关键字：绘制 自定义 图标 谷歌地图      更新时间：2023-09-26

试图绘制一个矩形区域，边界为lat/lng，还在该区域的中心绘制一个标记，当我使用谷歌地图的默认图标时，它在最后逐渐变细，它坚持在放大/缩小矩形。但是当使用自定义图标时，它不会粘在矩形区域上。请检查小提琴:

默认标记: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))
 });

是什么让自定义图标在其他地方绘图取决于图标的基础，如果它在左边或右边，因为如果它不在像默认的那样在中心，它将永远远离确切的lat/lng。

请参阅文档中有关复杂自定义标记的讨论。

<

复杂的图标/strong>

您可能希望指定复杂的形状来指示可单击的区域，并指定图标相对于其他覆盖层的显示方式(它们的"堆栈顺序")。以这种方式指定的图标应该将其图标属性设置为icon类型的对象。

图标对象定义一个图像。它们还定义了图标的大小，图标的原点(例如，如果你想要的图像是精灵中更大图像的一部分)，以及图标热点应该位于的锚点(这是基于原点)。

你可以将锚点设置在图标的任意位置(通常是"气泡"的顶端)。图标，而不是"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
 });

概念验证

代码片段: 

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>

相关文章：