自定义标记不显示在谷歌地图上

Custom marker not showing up on Google Maps

本文关键字：谷歌地图 显示 自定义      更新时间：2023-09-26

我正在尝试用我正在使用的图标代替谷歌的默认图标。但是，默认标记仍然显示在地图上。作为一个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);

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

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

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

我想你漏掉了坐标(位置)。应该是这样的

position: new google.maps.LatLng(lat, lng)
相关文章：