更改geojson自定义图标的锚点 - 谷歌地图api

时间:2017-10-24 23:33:26

标签: google-maps-api-3 google-maps-markers geojson

有什么办法可以改变geojson积分的锚点吗?在我的项目的精简版本下面。

我面临的问题是,一旦我缩小,这些图标就会从他们的位置“浮动”。 (使用40x40方形图标)。

我在这个问题上看到了很多类似的问题,但是没有一个例子涉及使用geojson生成的标记和/或使用setStyle更改图标。

var map;

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 51.822976,
      lng: 4.128522
    },
    zoom: 8,
    minZoom: 2,
    maxZoom: 26,
    tilt: 0,

  });

  var infowindow = new google.maps.InfoWindow();
  var offices = new google.maps.Data();

  offices.addGeoJson({
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [4.403528, 51.260561]
        },
        "properties": {
          "Location": "Antwerp",
          "Country": "BE"
        }
      },
      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [9.986818, 53.554377]
        },
        "properties": {
          "Location": "Hamburg",
          "Country": "DE"
        }
      }
    ]
  });

  offices.setStyle({
    icon: 'images/icons/logo-bl1.png'
  });
  offices.setMap(map);
  offices.addListener('click', function(event) {

    var office_location = event.feature.getProperty("Location");
    var office_country = event.feature.getProperty("Country");

    infowindow.setContent(office_location + " - " + office_country);

    infowindow.setPosition(event.feature.getGeometry().get());
    infowindow.setOptions({
      pixelOffset: new google.maps.Size(0, -30)
    });

    infowindow.open(map);
    map.panTo(event.latLng);
  });


  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();

  });
}

1 个答案:

答案 0 :(得分:1)

通过添加

来计算出来
var officeicon = {
    url: 'images/icons/logo-bl1.png',
    size: new google.maps.Size(40, 40),
    anchor: new google.maps.Point(20, 20)
};

然后

offices.setStyle({
    icon: officeicon,