Question

我正在尝试将Google的默认图标替换为我正在使用的图标。但是，默认标记仍在地图上显示。作为一个JavaScript新手我的技能仍然狡猾。任何人都可以检查我的代码，看看出了什么问题？感谢。

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

Answer 1

您无法从绝对路径加载本地文件。通过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>

Answer 2

您需要为脚本提供相对路径到您的图标文件：

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

Answer 3

我认为你错过了坐标（位置）。这应该是这样的

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

自定义标记未显示在Google地图上

3 个答案: