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

ITit超级大国

我已经在地图中创建了动态标记列表,并为图标创建了动态图像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。

莫勒博士

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

有一些变通方法可以访问<img/>-elements(基于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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类常见问题

如何在Google Maps API v3中使用SVG标记

来自分类Dev

Google Maps(v3)“ MarkerClusterer”:仅将圆形添加到可见标记

来自分类Dev

Google Maps Javascript API V3中的旋转标记

来自分类Dev

Google Maps Javascript API V3中的旋转标记

来自分类Dev

将Google Maps JavaScript API 3密钥添加到标记

来自分类Dev

如何在Google Maps API上的标记周围添加圆圈

来自分类Dev

如何在Google Maps API上的标记周围添加圆圈

来自分类Dev

延迟在Google Maps API V3中添加图层

来自分类Dev

最终如何在Google Maps API中更改标记位置?

来自分类Dev

如何在Google Maps API v3中检测进入和退出streetView

来自分类Dev

如何在Google Maps API v3中创建网格

来自分类Dev

动画化不同的标记API V3 Google Maps

来自分类Dev

标记位置未获取-Google Maps API v3

来自分类Dev

标记拖动事件Google Maps API V3

来自分类Dev

Google Maps API v3标记问题

来自分类Dev

Google Maps API v3唯一标记JS

来自分类Dev

Google Maps Javascript API v3的标记

来自分类Dev

Google Maps JS api v3延迟拖拽标记

来自分类Dev

如何在Google Maps API中找出该区域

来自分类Dev

如何在Google Maps JS API中制作虚线的折线?

来自分类Dev

如何在Android Studio中设置Google Maps Utility Api?

来自分类Dev

Google Maps API将侦听器添加到标记数组

来自分类Dev

Google Maps API v3在单击的标记上添加阴影

来自分类Dev

Google Maps JavaScript API v3更改标记并添加卫星视图

来自分类Dev

如何将事件添加到 Google Maps Javascript API 中的叠加图块

来自分类Dev

如何在北极或南极下方的灰色区域中阻止Google Maps API V3平移?

来自分类Dev

如何在Google Maps JavaScript V3中将多边形居中?

来自分类Dev

将半径滑块添加到Google Maps JavaScript API

来自分类Dev

google maps api将LatLng添加到折线的开头

Related 相关文章

  1. 1

    如何在Google Maps API v3中使用SVG标记

  2. 2

    Google Maps(v3)“ MarkerClusterer”:仅将圆形添加到可见标记

  3. 3

    Google Maps Javascript API V3中的旋转标记

  4. 4

    Google Maps Javascript API V3中的旋转标记

  5. 5

    将Google Maps JavaScript API 3密钥添加到标记

  6. 6

    如何在Google Maps API上的标记周围添加圆圈

  7. 7

    如何在Google Maps API上的标记周围添加圆圈

  8. 8

    延迟在Google Maps API V3中添加图层

  9. 9

    最终如何在Google Maps API中更改标记位置?

  10. 10

    如何在Google Maps API v3中检测进入和退出streetView

  11. 11

    如何在Google Maps API v3中创建网格

  12. 12

    动画化不同的标记API V3 Google Maps

  13. 13

    标记位置未获取-Google Maps API v3

  14. 14

    标记拖动事件Google Maps API V3

  15. 15

    Google Maps API v3标记问题

  16. 16

    Google Maps API v3唯一标记JS

  17. 17

    Google Maps Javascript API v3的标记

  18. 18

    Google Maps JS api v3延迟拖拽标记

  19. 19

    如何在Google Maps API中找出该区域

  20. 20

    如何在Google Maps JS API中制作虚线的折线?

  21. 21

    如何在Android Studio中设置Google Maps Utility Api?

  22. 22

    Google Maps API将侦听器添加到标记数组

  23. 23

    Google Maps API v3在单击的标记上添加阴影

  24. 24

    Google Maps JavaScript API v3更改标记并添加卫星视图

  25. 25

    如何将事件添加到 Google Maps Javascript API 中的叠加图块

  26. 26

    如何在北极或南极下方的灰色区域中阻止Google Maps API V3平移?

  27. 27

    如何在Google Maps JavaScript V3中将多边形居中?

  28. 28

    将半径滑块添加到Google Maps JavaScript API

  29. 29

    google maps api将LatLng添加到折线的开头

热门标签

归档