Изменение местоположения нескольких пользовательских значков маркеров Google Map API V3

Мне нужно иметь возможность изменить расположение точек значков маркеров, где каждое местоположение маркера имеет отдельный значок. Значки должны располагаться по центру точки привязки, а не по центру внизу, как по умолчанию...

Я не могу понять, как это сделать, не полностью переработав мой код...

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)

Спасибо вам за это. Я думаю, что моя проблема заключается в том, что я не знаю, как интегрировать это в свой код... Мне нужно, чтобы этот URL-адрес значка исходил из строки... пытаюсь сделать это, но это не работает:

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

icons google-maps-api-3 markers
person dchadney    schedule 06.08.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если бы вы использовали собственные значки API Google Maps v3, я бы сказал следующее. Что и было задано вашим вопросом.

Однако на карте, на которую вы предоставили ссылку (1), вы используете файл KMZ для маркеров дня открытых дверей (2), вас беспокоят эти значки? Чтобы центрировать их, вам нужно добавить тег HotSpot.

(1)     http://url/

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

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

(который, похоже, у вас есть, по крайней мере, в некоторых местах)

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

Если ваши значки имеют размер 40 x 40 пикселей и должны располагаться по центру точки. Посмотрите на определение 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)
           };
person geocodezip    schedule 07.08.2013
comment
var marker = новый google.maps.Marker({ position: siteLatLng, карта: карта, значок: значок, заголовок: сайты[0], zIndex: сайты[3], href: сайты[4] }); - person dchadney; 08.08.2013