在谷歌地圖中添加本地圖像作為自定義標記

Question

我正在嘗試使用谷歌地圖創建自定義標記。

var iconBase = //some url;
var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: iconBase + 'marker.png'
});

這基本上有效。 我在谷歌驅動器中托管我的圖像。 這很好，但有點慢，單擊地圖並渲染標記后第一次加載圖像需要大約 500-700 毫秒。 所以我試圖在本地添加圖像，遺憾的是，我似乎無法找到有關此圖像的資源。 如何使用本地（在我的項目目錄中）圖像？

假設我將它放在與我調用谷歌地圖服務的 php 文件相同目錄級別的文件夾“icons”中，如果有幫助的話。 謝謝！

更新！

我試過：

maker = new google.maps.Marker({
              position: location,
              map: globalMap,
              icon : "pubIcons/male-2.png"
            }); 

其中pubIcons是與我渲染地圖的 php 文件位於同一目錄中的文件夾。 我收到此錯誤：

GET http://localhost/bims-2.0/index.php/location/view/pubIcons/male-2.png 404 (Not Found) 

它有點像pubIcons/male-2.png是我的控制器“視圖”中的一個動作，我正在使用 Yii 順便說一句。

Answer 1

試試這個代碼:)

var image = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q";
var marker = new google.maps.Marker({
        position: location,
        map: globalMap,
        icon: image
});

更新

var image  = "http://yourdomain.com/image/image.php";

或者

icon : "/pubIcons/male-2.png"

Answer 2

我也遇到了這個問題，但以不同的方式解決了它。 我將 Django 用於我的 Web 框架，而 Django 使用一個名為 static 的目錄。 不知道這個目錄是否可以在 Django 之外使用。 我將圖片加載到我的靜態文件和我網頁的正文標簽中，有代碼

<div style="display:none">

 `<img src="{% static 'map/CrocMarker_45.png' %}" alt="Croc Marker" id="crocMark">`

</div>

在這種情況下，我將顯示設置為無，因為我不想在 body 標簽中渲染圖片，只想加載它以便我可以在我的地圖腳本中訪問它。

在我的function initMap()我創建了變量var crocMark=document.getElementById("crocMark").src; .

稍后，當您創建標記時，您只需將圖標設置為此變量即可。 例如：

var XMarker=new google.maps.Marker({ position: location, map: map_name, icon: crocMark });

這可能不是最好的方法，但它對我很有用，我希望它也適用於你。

編輯：請注意，如果不清楚，這是我的項目結構。

Project Root "Django">Django Root "Django_Project">My apps e.g. "map">static>map

Answer 3

google.maps.Marker的icon參數需要一個 URL。 通過指定"pubIcons/male-2.png" ，您提供了相對於您所在頁面的相對 URL。

如果要從本地文件系統指定文件，則需要使用文件 URL，例如： "file:///var/www/pubIcons/male-2.png"或文件位於本地的任何位置文件系統。 當然，如果您從本地機器加載 javascript，您將只能訪問本地文件。

完整示例：

maker = new google.maps.Marker({
              position: location,
              map: globalMap,
              icon : "file:///var/www/pubIcons/male-2.png"
            });