将infoWindow更改为iconImage

Question

我正在尝试使用google maps API为我的部门创建消防栓地图，到目前为止一切顺利，我只需要一个显示地理位置的信息窗口的帮助，我想将其更改为一个图标，而不是其中带有图标的信息窗口，请查看随附的代码和我的问题的屏幕截图。

  <!DOCTYPE html>
  <html>
    <head>
      <title>Hydrants</title>
      <meta name="viewport" content="initial-scale=1.0">
          <link rel="Shortcut Icon" href=images/hl.png>
       <meta name="mobile-web-app-capable" content="yes">
       <link rel="icon" href="images/hl.png">
      <meta charset="utf-8">
      <style>

        #map {
          height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
        }
      </style>
  </head>
  <body>

    <div id="map"></div>
    <script>

        var map, infoWindow;
        function initMap(){
        // Map options
        var options = {
          zoom:12,
          center: {lat: 53.428345, lng: -6.244447},
        }


        var map = new google.maps.Map(document.getElementById('map'), options);



        // Array of markers
        var markers = [


          {
            coords:{lat:53.423735,lng:-6.231331},
            iconImage:'images/hs.png',
            content:'<h1>Hydrant</h1> Number NOT LISTED <br> <img src=images/test.jpg width=100%>'
          },

          {
            coords:{lat:53.423571,lng:-6.231491},
            iconImage:'images/hs.png',
            content:'<h1>Hydrant</h1> Number 1'
          },

          {
            coords:{lat:53.422468,lng:-6.233256},
            iconImage:'images/hs.png',
            content:'<h1>Hydrant</h1> Number 14'
          },

              {
            coords:{lat:53.422010,lng:-6.233388},
            iconImage:'images/hs.png',
            content:'<h1>Hydrant</h1> Number 15'
          },

                      {
            coords:{lat:53.421566,lng:-6.233123},
            iconImage:'images/hs.png',
            content:'<h1>Hydrant</h1> Number 16'
          },

          {
            coords:{lat:53.429458,lng:-6.243520},
            iconImage:'images/hs.png',
            content:'<h1>Hydrant</h1> Number 151'
          },

               {
            coords:{lat:53.429528,lng:-6.243029},
            iconImage:'images/hs.png',
            content:'<h1>Hydrant</h1> Number 152'
          },

             {
            coords:{lat:53.428883,lng:-6.244101},
            iconImage:'images/hs.png',
            content:'<h1>Fire Main</h1> Number 154 <br>No Standpipe Required'
          },

          {
            coords:{lat:53.428315,lng:-6.245948},
            iconImage:'images/hs.png',
            content:'<h1>Hydrant</h1> Number 99'
          },

          {
            coords:{lat:53.424869,lng:-6.233566},
            iconImage:'images/hs.png',
            content:'<h1>Hydrant</h1> Number 210'
          }


        ];

        // Loop through markers
        for(var i = 0;i < markers.length;i++){
          // Add marker
          addMarker(markers[i]);
        }

        // Add Marker Function
        function addMarker(props){
          var marker = new google.maps.Marker({
            position:props.coords,
            map:map,
            //icon:props.iconImage
          });

          // Check for customicon
          if(props.iconImage){
            // Set icon image
            marker.setIcon(props.iconImage);
          }

          // Check content
          if(props.content){
            var infoWindow = new google.maps.InfoWindow({
              content:props.content
            });
                 marker.addListener('click', function(){
              infoWindow.open(map, marker);
            });
          }
        }



          infoWindow = new google.maps.InfoWindow;

          // Try HTML5 geolocation.
          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
              var pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
              };



              infoWindow.setPosition(pos);
              infoWindow.setContent('<img src=images/truck.png>');
              infoWindow.open(map);
              map.setCenter(pos);
            }, function() {
              handleLocationError(true, infoWindow, map.getCenter());
            });
          } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
          }
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
          infoWindow.setPosition(pos);
          infoWindow.setContent(browserHasGeolocation ?
                                'Error: The Geolocation service failed.' :
                                'Error: Your browser doesn\'t support geolocation.');
          infoWindow.open(map);
        }


</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYAPICODE&callback=initMap">
</script>

Answer 1

而不是在地理位置服务返回的位置上制作一个InfoWindow，而是做一个标记：

将infoWindow更改为iconImage

问题描述投票：-1回答：1

1个回答

最新问题

将infoWindow更改为iconImage

问题描述 投票：-1回答：1

1个回答

最新问题

问题描述投票：-1回答：1