Question

我需要能够更改标记图标的点位置，其中每个标记位置都有一个单独的图标。图标需要以锚点为中心，而不是底部中心，因为它们是默认值...

如果没有完全重新处理我的代码，我无法弄清楚如何做到这一点......

var sites = [
['Photo 1', 36.33835943134047, -93.63535, 4, 'mylinkurl', 'images/marker1.png'],
['Photo 2', 36.315939, -94.440630, 2, 'mylinkurl', 'images/marker2.png'],
['Photo 3', 36.085890, -93.90175, 1, 'mylinkurl', 'images/marker3.png'],
   ['Photo 4', 36.09948, -93.28370, 3, 'mylinkurl', 'images/marker4.pngg']
];


function setMarkers(map, markers) {

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            icon: sites[5],
            title: sites[0],
            zIndex: sites[3],
            href: sites[4]
        });


    google.maps.event.addListener(marker, 'click', function() {     
        $.fancybox({
            href : this.href,
            width : 1000,
            maxHeight   : 666,
            fitToView   : true,
            autoSize    : false,
            type: 'iframe',
            padding: 0,
            openEffect : 'elastic',
            openSpeed  : 150,
            aspectRatio : true,
            closeEffect : 'elastic',
            closeSpeed  : 150,
            closeClick : true,
            iframe : { scrolling : 'no'
            },
            preload   : false
        });
    });
     arrMarkers.push(marker);
    }

}

我找到了这段代码，但我无法弄清楚如何整合它......

 anchor: new google.maps.Point(16, 34)

谢谢你。我认为我的斗争是我不知道如何将它集成到我的代码中...我需要那个图标网址来自字符串...尝试这个，但它不起作用：

    function setMarkers(map, markers) {

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);                    
  var icon = { 
         url: sites[5],
         size: new google.maps.Size(40,40),
         anchor: new google.maps.Point(20,20)
       };
      var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            icon: sites[5],
            title: sites[0],
            zIndex: sites[3],
            href: sites[4]
        });

Answer 1

如果您使用的是原生Google Maps API v3图标，我会在下面说明。这是你的问题。

但是，在您提供链接（1）的地图上，您使用的是开放日标记（2）的KMZ文件，那些是您关注的图标吗？要使那些您需要添加hotSpot tag

的中心

(1)     http://url/

(2)     http://url/OpenHouse.kmz

<hotSpot x="0.5" y="0.5" xunits="fraction" yunits="fraction">

（看起来你至少在某些地方）

=============================

如果您的图标都是40px x 40px并且需要在该点上居中。查看google.maps.Icon定义：

google.maps.Icon object specification
Properties | Type   | Description
anchor     | Point  | The position at which to anchor an image in correspondance to the     location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image.
origin     | Point  | The position of the image within a sprite, if any. By default, the origin is located at the top left corner of the image (0, 0).
scaledSize | Size   | The size of the entire image after scaling, if any. Use this property to stretch/shrink an image or a sprite.
size       | Size   | The display size of the sprite or image. When using sprites, you must specify the sprite size. If the size is not provided, it will be set when the image loads.
url        | string | The URL of the image or sprite sheet.

你需要：

var icon = { 
             url: 'your/URL/for the icon",
             size: new google.maps.Size(40,40),
             anchor: new google.maps.Point(20,20)
           };

更改多个自定义标记图标Google Map API V3的点位置

1 个答案: