Question

当我放大地图时，如何让svg图像保持静态，该地图始终保持在同一位置。

这是我的fiddle

如果我使用png图像可以正常工作，但对我而言并不适合我，也不是我想要的。

感谢帮助

抱歉我的英文。

新Fiddle

Answer 1

锚点应该是Point，而不是LatLng。

default-acnchor是图标的中下部，因为看起来你需要将它设置在左上角，所以它必须是：

new google.maps.Point(0,0)

如果您想根据缩放设置缩放图标，则必须计算缩放属性并将图标重新指定给标记。

公式为（假设缩放12处的比例因子为1）：

Math.pow(2,map.getZoom()-12)

function initialize() {


  var mapOptions = {

    center: new google.maps.LatLng(-32.95041520, -60.66641804),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  triangleCoords = [
    new google.maps.LatLng(-32.93831432, -60.69379806),
    new google.maps.LatLng(-32.96337859, -60.67860603),
    new google.maps.LatLng(-32.96352262, -60.66633224),
    new google.maps.LatLng(-32.95041520, -60.66641807)
  ];

  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    IsInactivo: true


  });

  bermudaTriangle.setMap(map);

  var bounds = new google.maps.LatLngBounds();
  var i;

  for (i = 0; i < triangleCoords.length; i++) {
    bounds.extend(triangleCoords[i]);
  }

  console.log(bounds.getCenter());

  centroPolygon = bounds.getCenter();


  var inactive = new google.maps.MVCObject();
  inactive.set('icon', {
    path: 'M27.314 4.686c-3.022-3.022-7.040-4.686-11.314-4.686s-8.292 1.664-11.314 4.686c-3.022 3.022-4.686 7.040-4.686 11.314s1.664 8.292 4.686 11.314c3.022 3.022 7.040 4.686 11.314 4.686s8.292-1.664 11.314-4.686c3.022-3.022 4.686-7.040 4.686-11.314s-1.664-8.292-4.686-11.314zM28 16c0 2.588-0.824 4.987-2.222 6.949l-16.727-16.727c1.962-1.399 4.361-2.222 6.949-2.222 6.617 0 12 5.383 12 12zM4 16c0-2.588 0.824-4.987 2.222-6.949l16.727 16.727c-1.962 1.399-4.361 2.222-6.949 2.222-6.617 0-12-5.383-12-12z',
    fillColor: '#FF5858',
    fillOpacity: 0.4,
    scale: 1,
    strokeColor: '#FF5858',
    strokeWeight: 1,
    //set the anchor to the top left corner of the svg
    anchor: new google.maps.Point(0, 0)


  });

  google.maps.event.addListener(map, 'zoom_changed', function() {
    inactive.get('icon').scale = Math.pow(2, this.getZoom() - 12);
    //tell the marker that the icon has changed
    inactive.notify('icon');
  });
  google.maps.event.trigger(map, 'zoom_changed');

  new google.maps.Marker({
    map: map,
    position: centroPolygon
  }).bindTo('icon', inactive, 'icon');
}

google.maps.event.addDomListener(window, 'load', initialize)

      html,
      body,
      #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

<script src="https://maps.googleapis.com/maps/api/js?v=3&.js"></script>
<div id="map-canvas"></div>

svg多边形区域内的静态图像

1 个答案: