Google地圖標記精靈圖像位置

我們如何將精靈圖像定位爲Google地圖標記。對於例如：在CSS中我們定位像Google地圖標記精靈圖像位置

background: url('../images/bodycss/pointer.png') 28px -32px;

現在，我怎麼能包括上面的代碼下面的谷歌API-V3功能的形象呢？

function setMarkers(map, markers) { 

    var google_image = new google.maps.MarkerImage("http://example.com/images/bodycss/pointer.png"); 

    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, 
      title: sites[0], 
      zIndex: sites[3], 
      html: sites[4], 
      icon: google_image 
     }); 

     google.maps.event.addListener(marker, "mouseover", function() { 
      infowindow.setContent(this.html); 
      infowindow.open(map, this); 
     }); 
    } 
}

來源

2012-12-09 FR STAR

要從精靈圖像創建MarkerImage，您需要指定要用來創建圖標的圖像部分的原點和大小。

var icon = new google.maps.MarkerImage("http://domain/path/sprite.png", new google.maps.Size(12, 20), new google.maps.Point(100, 34));

你可以看看這個Blog post描述得很好

更新 - 看到這個工作Fiddle- DEMO

我已經使用這個圖像 - http://www.ipreferjim.com/site/wp-content/uploads/2012/10/markers.png?9d7bd4並調整大小和點圖標的值。

來源

2012-12-10 04:51:33 Cdeez

我試過了你的代碼，並將你發的博客文章寫成紅色。但不幸的是，它不顯示標記。我試過的代碼是 ** var icon = new google.maps.MarkerImage（「http://www.mydomain.com/images/bodycss/pointer.png」，new google.maps.Size（32 ，32），新的google.maps.Point（28，32））; ** 您能告訴我這有什麼問題嗎？ –

查看工作小提琴的更新 – Cdeez

A大謝謝您對此表示興趣。但它仍然不起作用，因爲我已經用我的精靈圖像值更新了你的小提琴腳本，它不起作用。看我的小提琴示例http://jsfiddle.net/frm683/uXL7H/。 –

可以使用MarkerImage其中，如記錄here覆蓋默認位置的anchor屬性：

在該位置在對應關係錨定的圖像的標記的位置上的地圖。默認情況下，錨點位於圖像底部的中心點。

p.s. MarkerImage已被棄用，您應該考慮使用icon。

來源

2012-12-09 06:26:12 kieran

感謝您的快速回復。我試過下面的代碼，但它不工作。 var google_image = new google.maps.MarkerImage（「http://www.mydomain.com/images/bodycss/pointer.png」，新的google.maps.Size（32，32），新的google.maps。點（28,32））; 由於MarkerImage不推薦使用，我無法理解如何使用此圖標。你能否給我舉個例子來說明我的要求？其實我的精靈圖像尺寸應該是高度：32px;寬度：32px和圖像路徑和位置如下 background：url（'../ images/bodycss/pointer.png'）28px -32px; –

之前MarkerImage類成爲棄用（這意味着它仍然支持，但應及時更換）有利於圖標的對象，你可能會寫這樣的一個簡單的圖像：

var qthIconHouse20 = new google.maps.MarkerImage('grafx/house_icon_20.png', 
            new google.maps.Size(20, 20), 
            new google.maps.Point(0, 0), 
            new google.maps.Point(10, 10));

現在，使用圖標的對象，你會這樣寫：

var qthIconHouse20 = { 
    url:  'grafx/house_icon_20.png', 
    size:  new google.maps.Size(20, 20), 
    origin:  new google.maps.Point(0, 0), 
    anchor:  new google.maps.Point(10, 10), 
    scaledSize: new google.maps.Size(20, 20) 
};

注意額外scaledSize參數：簡單的圖像，這是原始圖像的大小 - 在這種特定情況下是相同的尺寸參數。

對於精靈，在那裏你必須包含在一個單一的圖像文件多個圖像，你可以使用這樣的：

var qthIconBlueSpot16 = { 
    url:  'grafx/qth_icon_spots_16.png', 
    size:  new google.maps.Size(16, 16), 
    origin:  new google.maps.Point(0, 32), 
    anchor:  new google.maps.Point(8, 8), 
    scaledSize: new google.maps.Size(16, 48) 
};

需要注意的是，在這個例子中，起源已被指定爲（0，32 ）在一個包含多個16 * 16像素圖像的精靈中：所以在這裏，我們選擇精靈中的第三個圖像。在圖像的該部分中，我們將錨設置爲（8,8） - 即在要顯示的圖像的選定部分的中間。最後，縮放大小在這裏指的是精靈圖像的整個大小。

來源

2014-06-30 10:18:50

Google地圖標記精靈圖像位置

回答

相關問題