Question

使用不同的地图标记处理其他地图点以在Google地图上填充，但地图标记的PNG具有不同的大小。

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

这就是我所拥有的。总的来说，它工作正常，只需要知道如何调整poi-marker.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-marker.png的尺寸设置为30x30。

Answer 1

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

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

自定义Google地图标记，大小不同

1 个答案: