Question

我确信这是一个简单的解决方法，但我一直在搜索，我尝试的一切都不起作用。我要做的就是用自定义图标替换默认标记，但它不会显示。这是我的代码：

<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>

我知道图像位于正确的位置;如果输入路径，我可以在浏览器中找到它。我已经检查过并仔细检查过，但是我的代码有问题吗？对不起，我无法提供实例。

Answer 1

<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>

试试这个，我改变了如何创建标记。

我更改了图片网址以对其进行测试，它将其工作连接起来：

<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>

JSFiddle上的代码http://jsfiddle.net/iambnz/NGja4/160/

Answer 2

我创建了一个小测试文件，你的javascript代码似乎没有任何问题。我完全看到了自己的标记。因此，HTML文件的其余部分似乎有问题。 PNG文件是否存在？它真的是PNG吗？也许可以尝试不同的图像。

罗恩。

Answer 3

我发现在某些情况下，外部托管的图标需要额外的参数，例如

images/map-marker.png?raw=true

Answer 4

我在Ubuntu上使用Firefox 57.0.4然后切换到Chromium版本63.0.3239.84并且它有效。那是

?raw=true

开和关。

Google Maps API v3 - 自定义标记未显示

4 个答案: