it-swarm-id.com

Ubah ukuran marker di Google maps V3

Saya menggunakan penjelasan ini tentang cara mewarnai penanda google maps dengan mengatur ikon menggunakan MarkerImage , dan pewarnaannya bekerja dengan baik. Tapi saya tidak bisa membuat argumen scaledSize mengubah ukuran marker.

    var pinColor = 'FFFF00';
    var pinIcon = new google.maps.MarkerImage(
        "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34),
        new google.maps.Size(2, 4));
    marker.setIcon(pinIcon);

Apa penggunaan yang benar dari argumen scaledSize untuk mengubah ukuran marker? Misalnya, bagaimana saya bisa menggandakan ukuran marker?

41
steampowered

Jawaban ini menguraikan pada jawaban membantu John Black , jadi saya akan mengulangi beberapa konten jawabannya dalam jawaban saya.

Cara termudah untuk mengubah ukuran marker tampaknya meninggalkan argumen 2, 3, dan 4 nol dan menskalakan ukuran dalam argumen 5.

var pinIcon = new google.maps.MarkerImage(
    "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFFF00",
    null, /* size is determined at runtime */
    null, /* Origin is 0,0 */
    null, /* anchor is bottom center of the scaled image */
    new google.maps.Size(42, 68)
);  

Sebagai tambahan, jawaban ini untuk pertanyaan serupa menegaskan bahwa mendefinisikan ukuran marker dalam argumen ke-2 lebih baik daripada scaling pada argumen ke-5. Saya tidak tahu apakah ini benar.

Meninggalkan argumen 2-4 null berfungsi bagus untuk gambar pin google default, tetapi Anda harus menetapkan jangkar secara eksplisit untuk gambar pin google shadow standar, atau akan terlihat seperti ini:

what happens when you leave anchor null on an enlarged shadow

Bagian tengah bawah gambar pin kebetulan dikolokasi dengan ujung pin ketika Anda melihat grafik di peta. Ini penting, karena properti posisi marker (marker LatLng posisi di peta) akan secara otomatis dikolokasi dengan ujung visual pin ketika Anda meninggalkan jangkar (argumen 4) null . Dengan kata lain, meninggalkan jangkar nol memastikan titik ujung di mana seharusnya menunjuk.

Namun, ujung bayangan tidak terletak di tengah bawah. Jadi, Anda perlu mengatur argumen ke-4 secara eksplisit untuk mengimbangi ujung bayangan pin sehingga ujung bayangan akan dikolokasi dengan ujung gambar pin.

Dengan bereksperimen saya menemukan ujung bayangan harus diatur seperti ini: x adalah 1/3 ukuran dan y adalah ukuran 100%.

var pinShadow = new google.maps.MarkerImage(
    "http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
    null,
    null,
    /* Offset x axis 33% of overall size, Offset y axis 100% of overall size */
    new google.maps.Point(40, 110), 
    new google.maps.Size(120, 110)); 

untuk memberikan ini:

offset the enlarged shadow anchor explicitly

79
steampowered

Argumen ukuran dalam piksel. Jadi, untuk menggandakan ukuran marker contoh Anda, argumen kelima untuk konstruktor MarkerImage adalah:

new google.maps.Size(42,68)

Saya merasa lebih mudah untuk membiarkan API peta mengetahui argumen lain, kecuali saya membutuhkan sesuatu selain bagian bawah/tengah gambar sebagai jangkar. Dalam kasus Anda, Anda bisa melakukan:

var pinIcon = new google.maps.MarkerImage(
    "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
    null, /* size is determined at runtime */
    null, /* Origin is 0,0 */
    null, /* anchor is bottom center of the scaled image */
    new google.maps.Size(42, 68)
);
24
John Black