如何在此代码中添加 google 地图图标？

Question

我想在这个 Google 地图中使用我的自定义图标，我使用了 setTimeout() API 但我找不到如何将我的图标添加到它。我希望下面的这段代码包含你需要的所有信息来帮助我解决这个问题。

 html,
 body {
 height: 100%;
 margin: 0;
 padding: 0;
 }
 #map {
 height: 100%;
 }
 #floating-panel {
 position: absolute;
 top: 80px;
 left: 42.3%;
 z-index: 5;
 background-color: transparent;
 padding: 5px 5px;
 border: 2px round #fff;
 border-radius: 6px;
 text-align: center;
 font-family: 'Roboto', 'sans-serif';
 font-size: 18px;
 line-height: 30px;
 padding-left: 10px;
 opacity: 0.9;
 }
 #floating-panel {
 margin-left: -52px;
 }
 #header {
 top: 0px;
 left: 0px;
 width: 100%;
 height: 70px;
 position: absolute;
 z-index: 4;
 background-color: #fff;
 padding: 10px 10px;
 text-align: center;
 font-family: 'Roboto', 'sans-serif';
 font-size: 15px;
 line-height: 30px;
 padding-left: 10px;
 opacity: 1;
 box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.7)
 }
 img {
 margin-top: -9px;
 }

<html>
   <head>
  <meta charset="utf-8">
  <meta name="description" content="Startpagina">
  <title> Berlin Map</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link href='http://fonts.googleapis.com/css?family=Lato:400,100,300,500,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="css/component.css" />
  <script src="js/classie.js"></script>
  <head>
     <script src="https://maps.googleapis.com/maps/api/js"></script>
     <script>
        // If you're adding a number of markers, you may want to drop them on the map
        // consecutively rather than all at once. This example shows how to use
        // window.setTimeout() to space your markers' animation.
        
                       
        var neighborhoods = [
           
          {lat: 52.5075927, lng: 13.3881798}, 
          {lat: 52.516506, lng: 13.3796263},
          {lat: 52.5190608, lng: 13.3988893},
          {lat: 52.5137224, lng: 13.3904811},
          {lat: 52.5016021, lng: 13.3388043},
          {lat: 52.5209319, lng: 13.2934278},
          {lat: 52.5096488, lng: 13.3737554},
        ];
        
        var markers = [];
        var map;
        
                 
        
        function initMap() {
          map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: {lat: 52.545, lng: 13.400}
          });
        }
        
                 
                 
        function drop() {
          clearMarkers();
          for (var i = 0; i < neighborhoods.length; i++) {
            addMarkerWithTimeout(neighborhoods[i], i * 200);
          }
        }
        
        function addMarkerWithTimeout(position, timeout) {
          window.setTimeout(function() {
            markers.push(new google.maps.Marker({
              position: position,
              map: map,
              animation: google.maps.Animation.DROP
            }));
          }, timeout);
        }
        
        function clearMarkers() {
          for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(null);
          }
          markers = [];
        }
                 
                 
        
            
     </script>
     <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBW9wbX31PbIhBciON03InLQmXVt33KFI0&signed_in=true&callback=initMap"></script>
     <div id="floating-panel">
        <button class="btn btn-1 btn-1b" id="drop" onclick="drop()">SHOW BERLIN HOTSPOTS</button>
     </div>
     <div id="map"></div>
     </script>
     <div id="header">
        <img src="logo.png" height="86px">
        <!--<button class="btn btn-1 btn-1f">INFORMATION</button>-->
     </div>
     </body>
</html>

非常感谢您提供的任何帮助。

Answer 1

这是您需要的示例。我不确定你指的是哪个图标，所以我添加了两个（header 页面图标和 google 地图自定义标记图标）

代码：

new google.maps.Marker({
              position: position,
              map: map,
              animation: google.maps.Animation.DROP,
              icon: "http://img2.sencha.com/files/learn/s2.png"                                    

            });

要调整图标大小，请添加此代码：

 var icon1 = {
    url: "http://img2.sencha.com/files/learn/s2.png"     , 
    scaledSize: new google.maps.Size(50,50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};

Fiddle 示例：https://jsfiddle.net/wexd3spp/24/

如何在此代码中添加 google 地图图标？

How to add a google map icon to this code?

javascript

css

icons

maps