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