Question

我在Google地图上添加了一个标记。有没有什么办法可以在将标记图像放置在Google地图上后调整标记图像的大小，就像通过设置editable: true可以调整矩形一样。

我知道有scaledSize和size属性来设置标记图像的大小，但我不知道图像的新大小。如何使标记可调整大小？

以下是我正在使用的示例代码。我从地图文档部分获取了这个。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Answer 1

我自己做了一些事情来调整标记图像的大小。如果其他人遇到同样的事情，我想我应该回答。

我使用icon来设置标记的图像属性。比我创建了两个函数decSize(marker)和incSize(marker)并使用这个逻辑来改变大小。我不知道它是否会为每个用户服务，但它为我工作。

function createMarker() {
   var myIcon = {
       url: "car.png", //url
       scaledSize: new google.maps.Size(50, 50) };

  var marker = new google.maps.Marker({
  position: location, 
  map: map,
  draggable: true,
  icon:myIcon
  });
}


//Definition of decSize function. 
//This function is triggered through some button onClick listener.
function decSize(marker) {
   var oldIcon = marker.getIcon(); 
   var size_x = oldIcon.scaledSize.width;
   var size_y = oldIcon.scaledSize.height;
   var newIcon = {url: oldIcon.url, scaledSize: new google.maps.Size(size_x-1,size_y-1)};
   marker.setIcon(newIcon);
}

在Google Map中动态调整标记图像的大小

1 个答案: