如何将 Class 添加到 Google 地图 API v3 中的标记

Question

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

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'
        });

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

来玩 jQuery

Answer 1

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

有访问 <img/> 元素（基于 img-src）的变通方法，但这对您帮助不大，因为您还必须修改可点击区域，该区域将在另一个窗格。

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

简单演示：

//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>

如何将 Class 添加到 Google 地图 API v3 中的标记

How to add Class to marker in Google Maps API v3

google-maps

google-maps-api-3

dom-events