Google Maps API：縮放時SVG標記相對於地圖移動

我在地圖上創建了兩個標記，一個是標準標記，另一個是使用SVG路徑創建的。縮小時，標準標記不會相對於地圖移動，但SVG標記會移動。這裏是一個小提琴，你可以看到我的意思：Google Maps API：縮放時SVG標記相對於地圖移動

如何讓SVG標記它的位置相對於地圖抱什麼想法？

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>SVG Marker Moves</title> 
    <script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script> 
    <style> 
    html, body, #map_canvas { 
     height: 100%; 
     margin: 0; 
    } 
    </style> 
    </head> 
<body> 
<div id="map_canvas"></div> 
<script> 

var islandLoc = new google.maps.LatLng(48.692492,-122.908192); 
var birdLoc = new google.maps.LatLng(48.692615936699596, -122.90869625529479); 

var map = new google.maps.Map(document.getElementById('map_canvas'),{ 
    zoom: 19, 
    center: islandLoc, 
    disableDefaultUI: false, 
    zoomControl: true, 
    zoomControlOptions: { 
    style: google.maps.ZoomControlStyle.SMALL 
    }, 
    mapTypeId: google.maps.MapTypeId.SATELLITE 
}); 

var island_marker = new google.maps.Marker({ 
    position: islandLoc, 
    map: map 
}); 

var bird_icon = { 
     path: "m130.90909,164l54.09091,-23c0,0 -2.09091,-45 31.90909,-46c34,-1 37,6 42,23c5,17 -30,56 -30,71c0,15 23,21 56,40c33,19 56,62 64,81c8,19 14,39 21,46c7,7 16,16 15.09091,16c-0.90909,0 -14.09091,7 -15,7c-0.90909,0 -37.09091,-23 -46.09091,-23c-9,0 -35,-6 -57,-15c-22,-9 -35,-21 -35.90909,-21c-0.90909,0 0.90909,18 -0.09091,27c-1,9 -5,27 -5.90909,27c-0.90909,0 -7.09091,-15 -7.09091,-20c0,-5 5,-19 4.09091,-19c-0.90909,0 -3.09091,-16 -4,-16c-0.90909,0 -12.09091,0 -13,0c-0.90909,0 2.90909,10 0.90909,17c-2,7 2,31 1.09091,31c-0.90909,0 -17.09091,14 -18,14c-0.90909,0 8.90909,-20 8,-20c-0.90909,0 -1.09091,-15 -2.09091,-20c-1,-5 -5,-22 -5.90909,-22c-0.90909,0 -15.09091,-9 -29.09091,-50c-14,-41 37,-86 39,-93c2,-7 -8,-19 -8.90909,-19c-0.90909,0 -59.09091,7 -59.09091,7z", 
     fillColor: '#000000', 
     strokeColor: '#FFFFFF', 
     fillOpacity: 1, 
     strokeWeight: 1, 
     scale:.15 
    } 

var bird_marker = new google.maps.Marker({ 
    position: birdLoc, 
    map: map, 
    icon: bird_icon 
}); 

</script> 
</body> 
</html>

來源

2014-01-07 user1147171

您必須定義符號錨（一個符號默認爲左上角，而默認的圖像是底部中心）

對於這個特定的符號底部的點中心錨將大約258,381

演示：http://jsfiddle.net/a3LKP/5/

的原稿的計算的說明在底部中心（對於Inkscape）。

讓我們假設你沒有創建自己的路徑（符號），給定的路徑創建SVG文檔：

<svg 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    version="1.0"> 
    <g> 
    <path d="m130.90909,164l54.09091,-23c0,0 -2.09091,-45 31.90909,-46c34,-1 37,6 42,23c5,17 -30,56 -30,71c0,15 23,21 56,40c33,19 56,62 64,81c8,19 14,39 21,46c7,7 16,16 15.09091,16c-0.90909,0 -14.09091,7 -15,7c-0.90909,0 -37.09091,-23 -46.09091,-23c-9,0 -35,-6 -57,-15c-22,-9 -35,-21 -35.90909,-21c-0.90909,0 0.90909,18 -0.09091,27c-1,9 -5,27 -5.90909,27c-0.90909,0 -7.09091,-15 -7.09091,-20c0,-5 5,-19 4.09091,-19c-0.90909,0 -3.09091,-16 -4,-16c-0.90909,0 -12.09091,0 -13,0c-0.90909,0 2.90909,10 0.90909,17c-2,7 2,31 1.09091,31c-0.90909,0 -17.09091,14 -18,14c-0.90909,0 8.90909,-20 8,-20c-0.90909,0 -1.09091,-15 -2.09091,-20c-1,-5 -5,-22 -5.90909,-22c-0.90909,0 -15.09091,-9 -29.09091,-50c-14,-41 37,-86 39,-93c2,-7 -8,-19 -8.90909,-19c-0.90909,0 -59.09091,7 -59.09091,7z"/> 
    </g> 
</svg>

打開此文檔使用Inkscape。

先去File->document-properties->page確定文檔高度（對我來說這1052.36px，我想這是默認設置）

然後點擊符號來選擇它，在菜單欄你會看到屬性的物體：X，Y，W（寬度），（H）八。

對於我來說，現在：
文檔的高度： 1052.36
對象-X： 130.909
對象-Y： 671.362
對象的寬度： 254.155
對象 - 身高： 286.093

計算所述底部y：
。減去從文檔高度（1052-671 = ）

計算中心的x對象-γ：
添加的半對象寬度的對象X（131+（2分之254）= ）

所以錨是new google.maps.Point(258,381)

來源

2014-01-07 21:53:43

錨：新google.maps。點（220,390）位於鳥的腳下：[demo]（http://jsfiddle.net/9A4ET/12/）是否在某處記錄了符號的左上角默認值？ – geocodezip

[**默認情況下，符號固定在（0，0）處。該位置在與符號路徑相同的座標系中表示。**]（https://developers.google.com/maps/documentation/javascript/reference?hl=zh-CN&csw=1#Symbol）0,0是左上角我會假設（符號的座標系，不是可見符號的左上角） –

我的第一次計算是錯誤的，我用了inkscape，其中0,0是左下角，我需要將它轉換爲左上角 –

Google Maps API：縮放時SVG標記相對於地圖移動

回答

相關問題