簡體   English   中英

使用Google Maps API v3中精靈的標記圖標縮放標記大小

[英]Scaling marker size with marker icons from a sprite in Google Maps API v3

我正在玩Google Maps API(v3),我遇到了標記圖標的問題。 我正在嘗試根據各自的數據屬性改變標記的大小。

圖標本身是一個精靈,包含三個不同的圓形標記,每個16px乘16px。 我正在嘗試擴展單個圖標 ,但到目前為止還沒有成功。

這是我的代碼:

var offset = Math.floor(Math.random() * 3) * 16; // pick one of the three icons in the sprite

// Calculate desired pixel-size of the marker
var size = Math.floor(4*(count-1) + 8);

// Create custom marker
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    icon: new google.maps.MarkerImage(
        'img/dot.png', // my sprite with 3 circular icons
        new google.maps.Size(16, 16), // 16x16 is the original size of each individual icon
        new google.maps.Point(0, offset), // picking one of the three icons in the sprite
        new google.maps.Point(Math.floor(size/2), Math.floor(size/2)), // setting correct anchor for the marker
        new google.maps.Size(size, size) // trying to scale the marker
       )
    });

問題似乎是在最后一行,我正在嘗試將標記圖標縮放到所需的大小。 而不是它正確縮放,我得到一個奇怪的,扭曲的橢圓形圖標

我究竟做錯了什么?

經過一些試驗和錯誤,我已經弄清楚這應該如何工作(文檔是欺騙性的),感謝這篇博客文章

這是我的新代碼:

var offset = Math.floor(Math.random() * 3) * 16; // pick one of the three icons in the sprite

// Calculate desired pixel-size of the marker
var size = Math.floor(4*(count-1) + 8);
var scaleFactor = size/16;

// Create custom marker
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    icon: new google.maps.MarkerImage(
        'img/dot.png', // my 16x48 sprite with 3 circular icons
        new google.maps.Size(16*scaleFactor, 16*scaleFactor), // desired size
        new google.maps.Point(0, offset*scaleFactor), // offset within the scaled sprite
        new google.maps.Point(size/2, size/2), // anchor point is half of the desired size
        new google.maps.Size(16*scaleFactor, 48*scaleFactor) // scaled size of the entire sprite
       )
    });

希望這可以幫助有人下線!

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM