具有不同大小的自定义谷歌地图标记

Custom Google Map Markers with different sizes

本文关键字:谷歌 自定义 地图 图标      更新时间:2023-09-26

致力于使用不同的地图标记让其他地图点填充在谷歌地图上,但地图标记的PNG具有不同的大小。

我不太确定如何调整其他地图标记的大小。我从已经存在的代码中实现了这一点,所以我不知道我是否必须重写这个东西,或者是否有某个地方可以传递poi标记的正确图像大小.png

这是我所拥有的。总体而言,它工作正常,只需要知道如何调整poi标记.png图像的大小:

<script type="text/javascript">
function initialize() {
 var styles = [
{
 "featureType": "poi",
 "elementType": "labels",
 "stylers": [
{ "visibility": "off" }
 ]
 },{
   "featureType": "transit",
    "stylers": [
   { "visibility": "off" }
   ]
      },{
    }
   ];
   var myLatlng = new google.maps.LatLng(30.452636,-91.107285);
   var mapOptions = {
   center: myLatlng,
   zoom: 13,
   scrollwheel: false,
 };

 var locations = [
['<div class="dealerinfobox"><span class="dealername"><strong>Richards Honda</strong></span><br />7791 Florida Boulevard Baton Rouge, LA 70806</div><a target="_blank" class="directionslink button small-button" href="https://www.google.com/maps/dir//Richards+Honda/@30.452314,-91.107482,15z/">Get Directions</a>', 30.452636,-91.107285,'/path/to/folder/images/map-marker.png'],
['<div class="dealerinfobox"><span class="dealername"><strong>Broadmoor/Sherwood Forest</strong></span><br />2 Miles</div>', 30.4455406,-91.0385525,'/path/to/folder/images/poi-marker.png'],
['<div class="dealerinfobox"><span class="dealername"><strong>College Drive</strong></span><br /></div>', 30.4281267,-91.1363998,'/path/to/folder/images/poi-marker.png'],
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);

var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
 google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
  infowindow.setContent(locations[i][0]);
  infowindow.open(map, marker);
  }
 })(marker, i));
}

 map.setOptions({styles: styles});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

主地图标记(map-marker.png)的大小与POI标记(poi-marker.png)不同。POI 标记是 30x30,我正在尝试将 poi 标记的尺寸设置为 30x30.png。

您可以通过执行以下操作来调整标记的大小:

 var image = 
 {
     url: 'images/beachflag.png',
     // This marker is 20 pixels wide by 32 pixels tall.
     size: new google.maps.Size(20, 32),
     // 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)
  };
var marker = new google.maps.Marker(
            {
                position: new google.maps.LatLng(data.LastLat, data.LastLon),
                data: data,
                title: data.Description,
                icon: image
            });

请注意图标 (https://developers.google.com/maps/documentation/javascript/reference#Icon) - 您指定图标图像、锚点并为其指定大小。

有关复杂图标的更多信息,请参阅:https://developers.google.com/maps/documentation/javascript/examples/icon-complex

编辑:

根据您的评论,请尝试以下操作:

将 css 类添加到您的位置项中,然后在循环中查看当前项是否具有该类,然后相应地更改图标大小:

for (i = 0; i < locations.length; i++) 
{
   var iconImage;
    // Check if the current item has a poi class
    if(locations[i].indexOf('yourPOIClass') > -1)
    {     
       iconImage  = 
       {
            url: locations[i][3],   
            size: new google.maps.Size(30, 30),  // set POI size
            origin: new google.maps.Point(0,0),  
            anchor: new google.maps.Point(0, 32)
       };
    }
    else
    {
      iconImage = 
       {
            url: locations[i][3],   
            size: new google.maps.Size(50, 50),    // set other marker size
            origin: new google.maps.Point(0,0),  
            anchor: new google.maps.Point(0, 32)
       };
    }
 marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
         map: map,
         icon: iconImage 
       });
 google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
  infowindow.setContent(locations[i][0]);
  infowindow.open(map, marker);
  }
 })(marker, i));
}