Как я могу изменить размер значка на моем сайте Google Map? - PullRequest
Новая
       1

Как я могу изменить размер значка на моем сайте Google Map?

0 голосов
/ 20 января 2019

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

МОЙ КОД: 

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #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;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 38.736946, lng:  -9.142685},
          zoom: 5,
        });

        // Look Icon
        var iconLook = {
          url: "look.png", // url
          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
        };

        // Critic Icon (COMING SOON)
        var iconCritic = {
          url: "critic.png"
          scaledSize: new google.maps.Size(10, 10),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(0, 0)
        };

        // NEW MARKER
        var MarkerPorto = new google.maps.Marker({
          position: {lat: 38.736946, lng:  -9.142685},
          map:map,
          icon: iconLook
        })
        MarkerPorto.setMap(map);
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=[[NOT GIVING MY API]]&callback=initMap" async defer></script>
  </body>
</html>

ОШИБКА В КОНСОЛИ: 

Uncaught SyntaxError: Unexpected identifier map.html:42

И 

Uncaught (in promise) Kc {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵    at new Kc (https://maps.googleapis.com/[[MY API AGAIN]]&callback=initMap:124:108"}

1 Ответ

0 голосов
/ 20 января 2019

Причиной вашей ошибки является отсутствие запятой после url: "critic.png" ~ должно быть url: "critic.png",

Чтобы проверить это, я использовал случайные изображения из паутины - никаких ошибок после исправления пропущенной запятой. 

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      #map {
        height:100%;
        width:100%;
      }
      html, body {
        height: 100vh;
        width:100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script>

      var map;

      function initMap() {
        map = new google.maps.Map( document.getElementById('map'), {
          center: {lat: 38.736946, lng:  -9.142685},
          zoom: 5,
        });


        var iconLook = {
          url: "https://openclipart.org/image/2400px/svg_to_png/245938/mix-and-match-characters36.png",
          scaledSize: new google.maps.Size(50, 50),
          origin: new google.maps.Point(0,0),
          anchor: new google.maps.Point(0, 0)
        };
        var iconCritic = {
          url: "https://vignette.wikia.nocookie.net/fictionalcrossover/images/a/ac/A_Jay_Sherman.png/revision/latest?cb=20150218003155",
          scaledSize: new google.maps.Size(80, 80),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(0, 0)
        };




        var markerCritic=new google.maps.Marker({
            position:{lat:40.427326,lng:-1.630120},
            map:map,
            icon:iconCritic
        });
        var MarkerPorto = new google.maps.Marker({
          position: {lat: 38.736946, lng:  -9.142685},
          map:map,
          icon: iconLook
        });

      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap" async defer></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...