在多边形区域内的svg静态图片 [英] svg static image within the area of a polygon

问题描述

当我放大地图时，如何获得svg图像为静态图像，而该图像始终保持在同一位置.

How do I get the svg image is static when I zoom in on the map, which always remains in the same place.

这是我的小提琴

如果我使用png图像可以正常工作，但是它对我来说在视觉上并不好，也不是我想要的.

If I use png images works , but it is not visually well for me and is not what i'm looking for.

感谢您的帮助

对不起，我的英语.

新小提琴

推荐答案

锚点应该是一个Point，而不是LatLng.

The anchor is expected to be a Point, not a LatLng.

默认锚点位于图标的底部中间，因为您似乎需要将其设置为左上角，因此它必须为:

The default-acnchor is the bottom-middle of the icon, as it seems you need to set it to the top-left, so it has to be:

new google.maps.Point(0,0)

如果要基于缩放比例缩放图标，则必须计算缩放属性，然后将图标重新分配给标记.

When you want to have a scaled icon based on the zoom you must calculate the scale-property and re-assign the icon to the marker.

公式应为(假设缩放12的比例因子为1):

The formula would be(assuming the scale-factor at zoom 12 is 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静态图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！