如何在 Google Maps API v3 中添加类到标记答案

【问题标题】：How to add Class to marker in Google Maps API v3如何在 Google Maps API v3 中添加类到标记
【发布时间】：2015-04-17 11:43:58
【问题描述】：

我在地图中创建了一个动态标记列表，并为一个图标创建了一个动态图像 URL。现在我想在移动设备上将图像设置为小，所以我想为我的标记提供自定义类。有可能吗？

var myOptions = {
    zoom: 12,        
    center: new google.maps.LatLng(MY LAT,-MY LONG),
    zoomControl: true,

     var latlng1 = new google.maps.LatLng(MY LAT,-MY LONG);
        var marker1 = new google.maps.Marker({
            position: latlng1,
            map: map,
            icon: 'www.example.com/folder/1.png'
        });

以上是我的逻辑代码，现在我想为标记图标添加一个类。所以我可以在任何设备上管理标记，也可以使用类来玩 jQuery。

【问题讨论】：

检查this answer
你为什么不创建2个图像并打破地图代码中的逻辑？
我已经有 10 多张图片了。我使用循环并更改图像名称。但问题是如果我在移动设备上看到它，我想将该图像显示得很小。！

标签： google-maps google-maps-api-3 dom-events

【解决方案1】：

基本上，标记不是单个 HTML 元素，也没有任何基于 API 的 HTML 元素访问。

有一些解决方法可以访问<img/>-元素（基于 img-src），但这对您没有多大帮助，因为您还必须修改可点击区域，该区域将在另一个窗格中定义。

您最好忘记基于 CSS 的尝试，并使用 API 方式通过设置标记的 scaledSize-property 来缩放标记。

简单演示：

//just for demonstration, implement your own mobile-detection here
window.isMobile = confirm('are you using a mobile device?');


function initialize() {
  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(52.5498783, 13.425209099999961),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);
  marker = new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    icon: {
      url: 'http://maps.gstatic.com/mapfiles/markers2/marker.png',
      scaledSize: (window.isMobile) 
                    ? new google.maps.Size(20, 34) 
                    : new google.maps.Size(40, 68)

    }
  })
}

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

html,
body,
#map_canvas {
  height: 100%;
  margin: 0;
  padding: 0
}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_canvas"></div>

【讨论】：