Question

我知道这个问题经常被问到。但是不幸的是，对于我的代码，没有答案对我有用。我具有以下Google Maps代码，并希望设置自己的Google Maps标记图标。为此，我尝试了以下代码。不幸的是没有成功。

<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: '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 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（否则请相应地更改尺寸）。

您的代码段存在很多问题，我对其进行了如下修改，以便能够从我的角度重现它：

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

希望这会有所帮助！

如何设置单个Google Maps标记图标

1 个答案: