时间戳

首页 > 解决方案 > 如何使用geojson点特征上的数据setStyle调整自定义svg标记的大小

javascript - 如何使用geojson点特征上的数据setStyle调整自定义svg标记的大小

问题描述

这应该很容易解决，但我无法弄清楚为什么我的自定义标记在设置图标宽度和高度时会消失。

在尝试调整它的大小之前，svg 图标在地图上看起来很好...... https://jsfiddle.net/joshmoto/pzhjc6d7

但是当我通过图标数组添加尺寸参数时map.data.setStyle，我的标记消失了。

var geoJson_features = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "id": 70,
      "name": "roman coin"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [
      	-0.7318782806396484375,
        51.8924376272136740340
      ]
    }
  }]
};

function initialize() {

  // map properties
  var mapProp = {
    zoom: 17,
    zoomControl: false,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControlOptions: {
      mapTypeIds: [
        google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.SATELLITE,
        'night_hawk_style'
      ],
      style: google.maps.MapTypeControlStyle.HORIZONTAL,
      position: google.maps.ControlPosition.BOTTOM_RIGHT,
      backgroundColor: 'none'
    }
  };

  // google map object
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

  // load GeoJSON.
  google.maps.event.addListenerOnce(map, 'idle', function() {

    // load GeoJSON.
    map.data.addGeoJson(geoJson_features);

    // create empty bounds object
    var bounds = new google.maps.LatLngBounds();

    // loop through features
    map.data.forEach(function(feature) {

      // get the features geometry
      var geo = feature.getGeometry();

      // loop through each coordinate
      geo.forEachLatLng(function(LatLng) {
        bounds.extend(LatLng);
      });

    });

    // fit data to bounds
    map.fitBounds(bounds);

  });


  // map data styles based on geo json properties
  map.data.setStyle(function(feature) {

    // statusColor
    var statusColor = 'transparent';

    // check feature property status
    if (feature.getProperty('status')) {
      statusColor = feature.getProperty('status');
    }

    // return the style for the feature
    return ({
      icon: {

        // set svg icon svg
        url: 'https://svgshare.com/i/8tN.svg',

        // this marker is 14 pixels wide by 12 pixels high.
        //size: new google.maps.Size(14, 12),

        // the origin for this image is (0, 0).
        //origin: new google.maps.Point(0, 0),

        // The anchor for this image is the base (0, 12).
        //anchor: new google.maps.Point(0, 12)

      }
    });

  });

}

google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#googleMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<div id="googleMap"></div>

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

一旦开始在下面添加这些参数，我的自定义标记就会消失。并且控制台中没有错误。

return ({
  icon: {

    // set svg icon svg
    url: 'https://svgshare.com/i/8tN.svg',

    // this marker is 14 pixels wide by 12 pixels high.
    size: new google.maps.Size(14, 12),

    // the origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),

    // The anchor for this image is the base (0, 12).
    anchor: new google.maps.Point(0, 12)

  }
});

任何人都可以帮助了解这里出了什么问题。谢谢

标签： javascriptgoogle-maps-api-3

解决方案

要缩放该图标，请将其设置scaledSize为所需的大小（以及anchor您想要的位置，底座中间对我来说似乎有点奇怪，但这就是您想要的，Size(7,12)如下所示）：

map.data.setStyle(function(feature) {
  // statusColor
  var statusColor = 'transparent';
  // check feature property status
  if (feature.getProperty('status')) {
    statusColor = feature.getProperty('status');
  }
  // return the style for the feature
  return ({
    icon: {
      // set svg icon svg
      url: 'https://svgshare.com/i/8tN.svg',
      // this marker is 765.9 pixels wide by 666 pixels high.
      scaledSize: new google.maps.Size(14, 12),
      // The anchor for this image is the base (0, 12).
      anchor: new google.maps.Point(7, 12)
    }
  });
});

小提琴

结果地图的屏幕截图

代码片段：

function initialize() {
  // map properties
  var mapProp = {
    zoom: 17,
    zoomControl: false,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControlOptions: {
      mapTypeIds: [
        google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.SATELLITE,
        'night_hawk_style'
      ],
      style: google.maps.MapTypeControlStyle.HORIZONTAL,
      position: google.maps.ControlPosition.BOTTOM_RIGHT,
      backgroundColor: 'none'
    }
  };
  // google map object
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  var measle = new google.maps.Marker({
    position: {
      lng: -0.7318782806396484375,
      lat: 51.8924376272136740340
    },
    map: map,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(4, 4)
    }
  });
  // load GeoJSON.
  google.maps.event.addListenerOnce(map, 'idle', function() {
    // load GeoJSON.
    map.data.addGeoJson(geoJson_features);
    // create empty bounds object
    var bounds = new google.maps.LatLngBounds();
    // loop through features
    map.data.forEach(function(feature) {
      // get the features geometry
      var geo = feature.getGeometry();
      // loop through each coordinate
      geo.forEachLatLng(function(LatLng) {
        bounds.extend(LatLng);
      });
    });
    // fit data to bounds
    map.fitBounds(bounds);
  });
  // map data styles based on geo json properties
  map.data.setStyle(function(feature) {
    // statusColor
    var statusColor = 'transparent';
    // check feature property status
    if (feature.getProperty('status')) {
      statusColor = feature.getProperty('status');
    }
    // return the style for the feature
    return ({
      icon: {
        // set svg icon svg
        url: 'https://svgshare.com/i/8tN.svg',
        // this marker is 765.9 pixels wide by 666 pixels high.
        scaledSize: new google.maps.Size(14, 12),
        // The anchor for this image is the base (0, 12).
        anchor: new google.maps.Point(7, 12)
      }
    });
  });
}
google.maps.event.addDomListener(window, "load", initialize);
var geoJson_features = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "id": 70,
      "name": "roman coin"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-0.7318782806396484375,
        51.8924376272136740340
      ]
    }
  }]
};
html,
body,
#googleMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<div id="googleMap"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

推荐阅读