自定義標記未顯示在Google地圖上

我試圖用正在使用的圖標替換Google的默認圖標。但是，默認標記仍然在地圖上顯示。作爲一個JavaScript新手，我的技能仍然狡猾。任何人都可以檢查我的代碼，看看哪裏出了問題？謝謝。自定義標記未顯示在Google地圖上

var hq_icon = "C:\Users\User.CARRIESHIH-PC\Desktop\Map_dev\hq.png"; 

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 

var HQMarker = new google.maps.Marker({ 
      position: FirsteamHQ, 
      map: map, 
      icon: hq_icon 
      }); 
HQMarker.setMap(map);

來源

2015-08-17 user3600725

是否有JavaScript控制檯什麼有趣的消息？ [你的代碼（至少你發佈的內容）適用於我（帶有公開可用的圖標）]（http://jsfiddle.net/geocodezip/tdv8d7yr/）。請提供證明此問題的[最小，完整，測試和可讀示例]（http://stackoverflow.com/help/mcve）。 – geocodezip

-1

我想你錯過了座標（位置）。這應該是這樣的

position: new google.maps.LatLng(lat, lng)

來源

2015-08-17 08:17:09 Gacci

糟糕。 FirsteamHQ是座標的抽象形式。感謝您指出！ – user3600725

那麼，它現在有效嗎？ – Gacci

不幸的是沒有。該圖標仍然是Google提供的默認圖標。我相信我的自定義圖標的語法是正確的，但我無法找出哪裏出錯。 – user3600725

您不能從絕對路徑加載本地文件。通過HTTP（S）提供文件或使用相對路徑。

[編輯]

一個完整的例子：

<!DOCTYPE html> 
<html lang = "en"> 
<head> 
    <style type="text/css"> 
     html{height: 100%} 
     body{height: 100%; margin: 0; padding: 0} 
     #map-canvas{height: 100%} 
    </style> 
    <title>GMaps Demo</title> 
    <script src = "https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script> 
     function initialize(){ 
      var mapOptions = { 
       center: new google.maps.LatLng(-34.397, 150.644), 
       zoom: 8, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
      var hq_icon = "http://i.imgur.com/Na6VUFY.png"; 
      var HQMarker = new google.maps.Marker({ 
       position: new google.maps.LatLng(-34.397, 150.644), 
       map: map, 
       icon: hq_icon 
      }); 
      HQMarker.setMap(map); 


     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
     </script> 
</head> 
<body> 
    <div id = "map-canvas"> 
    </div> 
</body> 
</html>

來源

2015-08-17 08:55:12

嗨。我嘗試了你所說的，分配*** var hq_icon =「http://i.imgur.com/Na6VUFY.png」; ***。但是，當我這樣做時，整個Google地圖都無法加載。 – user3600725

然後還有其他的錯誤。我編輯了我的答案，以提供一個完整的例子。 –

您**可以**加載本地文件（不需要http：//或https：//），但它必須是相對路徑。 – MrUpsidown

您需要提供一個相對路徑腳本到你的圖標文件：

var hq_icon = "relative/path/to/hq.png"; 

var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 

var HQMarker = new google.maps.Marker({ 
    position: FirsteamHQ, 
    map: map, 
    icon: hq_icon 
}); 

HQMarker.setMap(map);

因此，如果例如您的上述腳本位於map.js的以下結構中，您的hq.png圖片位於images/markers

Project 
| 
|-- map.js 
|  
+-- images 
    | 
    +-- markers 
     | 
     |-- hq.png

那麼相對路徑是images/markers/hq.png

來源

2015-08-17 13:38:50 MrUpsidown

自定義標記未顯示在Google地圖上

回答

相關問題