Question

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

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。

Answer 1

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

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

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

简单演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何在Google Maps API v3中将标记添加到标记

1 个答案: