Как разместить несколько значков для маркеров карты Google в версии 3?

Question

Я пытаюсь создать карту, похожую на this (которая использует v2 API).Я хочу, чтобы каждый маркер на карте состоял из изображения с рамкой или фоном позади , например .

Использование icon и shadow MarkerOptions, похоже, не позволяет этогопотому что тень маркеров отстает от других значков маркеров.

Answer 1

Вы можете использовать отличную маленькую библиотеку, RichMarker . Его документация здесь .

Чтобы упростить использование, вы даже можете создать свой собственный класс маркеров, примерно такой:

Ns.Marker = function(properties) {

    RichMarker.call(this, properties);

    this.setContent('<div class="three-images-marker">' +
            properties.NsImage ? '<div class="marker-image-1"><img src="'+properties.NsImage1+'"/></div>' : '' + 
            properties.NsFrameImage ? '<div class="marker-image-2"><img src="'+properties.NsImage2+'"/></div>' : '' +
        '</div>');
};

Ns.Marker.prototype = Object.create(RichMarker.prototype);


// and use it like this:
var yourFramedMarker = new Ns.Marker({
      position: yourMarkerLatlng,
      map: yourMap,
      NsImage: 'example.com/image.png',
      NsFrameImage: 'example.com/frame.png',
});

«Ns» - это любое пространство имен, которое вы используете, если вы это делаете.

С этого момента это CSS-работа, вы можете расположить изображения так, как вам нравится.

Answer 2

Я думаю, вам придется объединить изображения с фоном маркера. Когда я строил что-то подобное, я использовал CSS-спрайты и рассчитывал вертикальное смещение (vPos), основываясь на стандартной высоте. Я просто не беспокоился о тенях.

     var mImage = new google.maps.MarkerImage("YOURMARKER.png", 
        new google.maps.Size(34, 35), 
        new google.maps.Point(0, vPos),
        new google.maps.Point(10, 34)
    ); 
    //insert marker
    marker = new google.maps.Marker({
        icon: mImage,
        position: new google.maps.LatLng(latitude, longitude),
        map: map
    });

Answer 3

да, тени маркеров размещаются на отдельном слое - ниже всех маркеров.Вы должны объединить фон и фотографию в одно изображение значка или создать новый класс, который будет наследоваться от MarkerImage .