Google Maps API v3 - 自定義標記沒有出現

我相信這是一個簡單的修復方法，但我一直在尋找，我嘗試的所有東西都不起作用。我想要做的就是用自定義圖標替換默認標記，但不會顯示。這裏是我的代碼：Google Maps API v3 - 自定義標記沒有出現

<script type="text/javascript"> 

function initialize() { 
var myLatlng = new google.maps.LatLng(43.041936,-88.044523); 
var mapOptions = { 
    center:myLatlng, 
    zoom:15, 
    disableDefaultUI:true, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
} 
var map = new google.maps.Map(document.getElementById("milwaukeeMap"), mapOptions); 

var marker = new google.maps.Marker(); 
    marker.setPosition(myLatlng); 
    marker.setMap(map); 
    marker.setIcon('/images/map-marker.png'); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script>

我知道圖像是在正確的位置;如果我輸入路徑，我可以在我的瀏覽器中找到它。我已經檢查並重複檢查過，但是我的代碼有問題嗎？對不起，我無法提供現場示例。

來源

2013-07-12 eksch

發佈的代碼沒有問題（假設您指出的標記URL是正確的[working jsfiddle]（http://jsfiddle.net/m8Mzr/））。 – geocodezip

<script type="text/javascript"> 

function initialize() { 
var myLatlng = new google.maps.LatLng(43.041936,-88.044523); 
var mapOptions = { 
     center:myLatlng, 
     zoom:15, 
     disableDefaultUI:true, 
     mapTypeId:google.maps.MapTypeId.ROADMAP 
     } 
var map = new google.maps.Map(document.getElementById("milwaukeeMap"), mapOptions); 

var markerImage = 'images/map-marker.png'; 

var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     icon: markerImage 
     }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script>

試試這個，我改變了如何創建標記。

我改變了圖像的URL來測試它，它的接縫其工作：對的jsfiddle http://jsfiddle.net/iambnz/NGja4/160/

<html> 
<head> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script type="text/javascript"> 

function initialize() { 
var myLatlng = new google.maps.LatLng(43.041936,-88.044523); 
var mapOptions = { 
     center:myLatlng, 
     zoom:15, 
     disableDefaultUI:true, 
     mapTypeId:google.maps.MapTypeId.ROADMAP 
     } 
var map = new google.maps.Map(document.getElementById("milwaukeeMap"), mapOptions); 

var markerImage = 'http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/bar_coktail.png'; 

var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     icon: markerImage 
     }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
<body> 
<div id="milwaukeeMap" style="height:400px;width:400px;"></div> 
</body> 
</html>

代碼

來源

2013-07-12 15:53:54 devbnz

感謝您的輸入;不知道這個交易與我的形象是什麼，但我只是移動了位置，現在它正在工作。 – eksch

你把它移到哪裏？我有同樣的問題。 – Bazley

死鏈接http://jsfiddle.net/iambnz/NGja4/160/ – ManirajSS

我創建了一個小測試文件，並且您的JavaScript代碼似乎沒有任何問題。我完美地看到了我自己的標記。所以看起來你的HTML文件的其餘部分有問題。 PNG文件是否存在？它真的是一個PNG嗎？也許嘗試一個不同的圖像來確定。

Ron。

來源

2013-07-12 15:52:52 Ron

我發現，在某些情況下，外部託管的圖標例如需要一個額外的參數

images/map-marker.png?raw=true

來源

2017-06-04 17:48:00 DLyons

我使用Firefox 57.0.4 for Ubuntu，然後切換到Chromium版本63.0.3239.84，它工作。這是與

?raw=true

打開和關閉。

來源

2018-01-19 23:23:22

Google Maps API v3 - 自定義標記沒有出現

回答

相關問題