如何设置单独的谷歌地图标记图标

Question

我知道这个问题被问得更频繁。但不幸的是，对于我的代码，没有一个答案对我有用。我有以下谷歌地图代码，并想设置我自己的谷歌地图标记图标。

为此，我尝试了以下代码。可惜没有成功。

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js? 
key=key"></script>


<div id="map_canvas"></div>

  <script>
  var locations = [
  ['title',51.0, 11.0, 'https://www.domain.de/, 4],
   ['title',51.0, 11.0, 'https://www.domain.de/, 4],
  ['title',51.0, 11.0, 'https://www.domain.de/, 4],
  ['title',51.0, 11.0, 'https://www.domain.de/, 4],
  ['title',51.0, 11.0, 'https://www.domain.de/, 4],
  ['title',51.0, 11.0, 'https://www.domain.de/, 4]
];
var map;
var markers = [];
function init(){    
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 7,
    center: new google.maps.LatLng(51.5151, 10.4545),
     mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: 
    [
]
  });
function setMarkers(map) {
  var image = {
   url: 'marker-path/marker.jpg',
    size: new google.maps.Size(20, 32),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0, 32)
  };
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };
  var num_markers = locations.length;
  for (var i = 0; i < num_markers; i++) {  
    markers[i] = new google.maps.Marker({
      position: {lat:locations[i][1], lng:locations[i][2]},
      map: map,
icon: image,
      html: locations[i][0],
      id: i,
    });   
    google.maps.event.addListener(markers[i], 'click', function(){
      var infowindow = new google.maps.InfoWindow({
        id: this.id,
        content:this.html,
        position:this.getPosition()
      });
      google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
          markers[this.id].setVisible(true);
      });
  this.setVisible(false);
  infowindow.open(map);
  });
 }
}}
init();
</script>

很遗憾，没有显示任何标记。问题出在哪里？

Answer 1

首先，确保 (1) 图片的路径正确，(2) 图片的大小实际上是 20 x 32（否则相应地更改大小）。

您的代码 sn-p 有很多问题，我已将其修改如下，以便能够从我这边重现它：

<script>
    var locations = [
        ['title', 41.38879, 2.15899, 'https://www.domain.de/', 4],
        ['title', 48.85341, 2.3488, 'https://www.domain.de/', 4],
        ['title', 52.52437, 13.41053, 'https://www.domain.de/', 4]
    ];

    var map;
    var markers = [];

    function init() {
        map = new google.maps.Map(document.getElementById('map_canvas'), {
            zoom: 5,
            center: new google.maps.LatLng(51.5151, 10.4545),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: []
        });

        setMarkers(map);
    }


    function setMarkers(map) {
        var image = {
            url: 'maker-path/maker.jpg',
            size: new google.maps.Size(20, 32),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(0, 32)
        };

        var num_markers = locations.length;

        for (var i = 0; i < num_markers; i++) {
            markers[i] = new google.maps.Marker({
                position: { lat: locations[i][1], lng: locations[i][2] },
                map: map,
                icon: image,
                html: locations[i][0],
                id: i
            });
            google.maps.event.addListener(markers[i], 'click', function() {
                var infowindow = new google.maps.InfoWindow({
                    id: this.id,
                    content: this.html,
                    position: this.getPosition()
                });
                google.maps.event.addListenerOnce(infowindow, 'closeclick', function() {
                    markers[this.id].setVisible(true);
                });
                this.setVisible(false);
                infowindow.open(map);
            });
        }
    }
</script>

您也可以先将“maker-path/maker.jpg”替换为例如https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png。

您将看到来自Google's documentation 的图标确实是如何显示的。

如果您自己的图标不是，那么这意味着您需要仔细检查我上面提到的指针 (1) 和/或 (2)。

希望这会有所帮助！