简体   繁体   English

更改自定义标记大小的Google地图

[英]Change Custom Marker Size Google Maps

I managed set a custom icon for the image marker (url of icon is in code), but I have no idea how to customize its size. 我设法为图像标记设置了一个自定义图标(图标的URL在代码中),但是我不知道如何自定义其大小。 I've looked around for help online, but due to my very limited coding knowledge, have not been able to add the code needed to make it work. 我一直在网上寻求帮助,但是由于我的编码知识非常有限,因此无法添加使其正常工作所需的代码。 Can someone send me the complete, finished code with the modification needed to customize width/height for the market icon? 有人可以将修改后的完整完整代码发送给我,以定制市场图标的宽度/高度吗?

Thank you! 谢谢!

<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDL51DzuRotMkfR09g540u2dZHlKPMpR54'></script>
<div style='overflow:hidden;height:450px;width:100%;'>
<div id='gmap_canvas' style='height:450px;width:100%;'></div>
<style>
#gmap_canvas img {
  max-width:none!important;
  background:none!important
}
</style>
</div>
<script type='text/javascript'>
function init_map(){
  var myOptions = {
    scrollwheel: false, 
    draggable: false, 
    zoom:16,
    center:new google.maps.LatLng(25.841211,-80.308539),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
  marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(25.841211,-80.308539),
    icon: 'http://www.ssglobalsupply.com/images/location-contact.png'
  });
  infowindow = new google.maps.InfoWindow({
    content:'6891 NW 74th St Medley, FL 33166<br>'
  });
  google.maps.event.addListener(marker, 'click', function(){
    infowindow.open(map,marker);
  });
  infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
google.maps.event.addDomListener(window, "resize", function() {
  var center = map.getCenter();
  google.maps.event.trigger(map, "resize");
  map.setCenter(center); 
});
</script>

The size arguments are in pixels. size参数以像素为单位。 So, to double your example's marker size the fifth argument to the MarkerImage constructor would be: 因此,为了使示例的标记大小加倍,MarkerImage构造函数的第五个参数将是:

    new google.maps.Size(42,68)

Check the link for steampowered's answer to get more details 查看链接以获取Steampowered的答案以获取更多详细信息


Here is the JSFIDDLE for your icon marker size 50px x 50px 这是您的图标标记大小为50px x 50px的JSFIDDLE

      var image = {
      url: 'http://www.ssglobalsupply.com/images/location-contact.png',
      // This marker is 50 pixels wide by 50 pixels high.
      size: new google.maps.Size(50, 50),
      // The origin for this image is (0, 0).
      origin: new google.maps.Point(0, 0),
      // The anchor for this image is the base of the flagpole at (0, 32).
      anchor: new google.maps.Point(0, 32)
    };

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM