Изменение информационного окна на iconImage - PullRequest
Новая
       61

Изменение информационного окна на iconImage

0 голосов
/ 14 октября 2019

Я экспериментирую с созданием карты пожарных гидрантов для моего отдела с использованием API карт Google, пока все идет хорошо, мне просто нужна помощь с информационным окном, отображающим геолокацию, я хочу изменить это на простозначок, а не информационное окно со значком внутри, пожалуйста, смотрите прикрепленный код и скриншот моей проблемы.

Снимок экрана здесь :

enter image description here

  <!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>

1 Ответ

0 голосов
/ 14 октября 2019

Вместо создания информационного окна в местоположении, возвращенном службой геолокации, создайте маркер: 

var truck = new google.maps.Marker({
  position:pos,
  map: map,
  icon: "images/truck.png"
});

подтверждение концепции понятия 

<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,
      });

      // 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
        };
        var truck = new google.maps.Marker({
          position:pos,
          map: map,
          icon: "https://maps.google.com/mapfiles/ms/micons/blue.png"
        })
        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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...