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

【问题标题】：Resizing Marker Image dynamically in Google Map在 Google Map 中动态调整标记图像的大小
【发布时间】：2015-01-02 14:35:04
【问题描述】：

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

我知道有 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>

【问题讨论】：

标记不可编辑。您可以更改大小，但您需要编写代码来修改标记的图标来做到这一点。请提供一个 Minimal, Complete, Tested and Readable example 来证明您的问题。

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案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);
}

【讨论】：