Question

您好，我是Google Maps API的新手，我正在尝试制作将图标放在定义的位置以标识销售的地图，但我似乎无法调整图标的大小！我已经尝试用图标创建一个var并尝试调整图标的大小，但是我认为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

AND

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"}

Answer 1

发生错误的原因是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>

如何在Google地图网站中调整图标的大小？

1 个答案: