我見過很多與此類似的其他問題（此處，此處和此處），但是他們都接受了不能解決我問題的答案。我發現該問題的最佳解決方案是StyledMarker庫，該庫可以讓您定義標記的自定義顏色，但是我無法使用默認標記（使用Google標記搜索時獲得的一種）中間的一個點），似乎只是在標記中帶有字母或特殊圖標。
3 回答
偶然的你
TA貢獻1841條經驗 獲得超3個贊
這是使用Gooogle Maps API本身的不錯的解決方案。沒有外部服務，沒有額外的庫。并啟用自定義形狀以及多種顏色和樣式。該解決方案使用矢量標記，googlemaps api將其稱為Symbols。
除了少數幾個有限的預定義符號外，您還可以通過指定SVG路徑字符串（Spec）來制作任何顏色的任何形狀。
要使用它，而不是將“ icon”標記選項設置為圖像URL，而是將其設置為包含符號選項的字典。例如，我設法制作了一個與標準標記非常相似的符號：
function pinSymbol(color) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 1,
};
}
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(latitude, longitude),
icon: pinSymbol("#FFF"),
});
矢量標記
如果您小心地將形狀關鍵點保持在0,0，則不必定義標記圖標居中參數。另一個路徑示例，沒有點的相同標記：
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
無點矢量標記
在這里，您有一個非常簡單且難看的彩色標志：
path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z',
矢量標志
您還可以使用可視工具（如Inkscape）（GNU-GPL，多平臺）創建路徑。一些有用的提示：
Google API只接受一條路徑，因此您必須將任何其他對象（正方形，cercle ...）轉換為一條路徑，并將它們作為單個路徑加入。路徑菜單中的兩個命令。
要將路徑移至（0,0），請進入“路徑編輯”模式（F2），選擇所有控制節點并拖動它們。使用F1移動對象，不會更改路徑節點坐標。
要確保參考點位于（0,0），可以單獨選擇它，并在頂部工具欄上手動編輯坐標。
保存為XML的SVG文件后，使用編輯器將其打開，查找svg：path元素并復制'd'屬性的內容。
- 3 回答
- 0 關注
- 874 瀏覽
添加回答
舉報
0/150
提交
取消