简体   繁体   English

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

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

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. 尝试绘制边界为lat / lng的矩形区域,并在该区域的中心绘制一个标记,当我使用末端逐渐变细的google maps的默认图标时,在放大/缩小时它会粘贴到矩形上。 but when using a custom icon then it does not stick to the rectangle area. 但是使用自定义图标时,它不会粘贴到矩形区域。 please check the fiddles: 请检查小提琴:

Default marker: https://jsfiddle.net/8mQ6G/473/ 默认标记: 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))
 });

Custom marker: https://jsfiddle.net/8mQ6G/472/ 自定义标记: 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. 请建议对此问题有任何解决方案。

Please see the discussion of complex custom markers in the documentation . 请参阅文档中有关复杂自定义标记的讨论。

Complex icons 复杂的图标

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类型的对象。

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 ). 它们还定义了图标的大小,图标的原点(例如,如果所需图像是子画面中较大图像的一部分)以及图标热点应位于的锚点(基于来源 )。

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: 您可以将锚点设置到图标上您希望放置在该位置的任何位置(通常是“气泡”图标的尖端,但是对于“ 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 概念证明

code snippet: 代码段:

 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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM