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