Question

我想在我的谷歌地图中使用我的自定义图标，我使用了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

以下是您需要的示例。我不确定你引用的是哪个图标，所以我添加了它们（标题页图标和谷歌地图自定义标记图标）

CODE：

lmm()

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

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

            });

小提琴示例：https://jsfiddle.net/wexd3spp/24/

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

1 个答案: