Как изменить размер пользовательского маркера SVG, используя набор данных setStyle на объекте Geojson Point - PullRequest
0 голосов
/ 18 октября 2018

Это должно быть довольно тривиально, но я не могу понять, почему мой пользовательский маркер исчезает, когда я устанавливаю ширину и высоту значка.

Значок 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)

  }
});

Может кто-нибудь помочь понять, что здесь происходит не так.Спасибо

Ответы [ 2 ]

0 голосов
/ 18 октября 2018

Чтобы масштабировать этот значок, установите его 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)
    }
  });
});

скрипка

screenshot of resulting map

фрагмент кода:

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"></script>
0 голосов
/ 18 октября 2018

Вам не нужно возвращать значок в вашей функции инициализации, вы должны установить свой значок на новый объект с новыми свойствами.

const 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)

  }
      marker = new google.maps.Marker({
        position: feature.position,
        icon: icon,
        map: map
      });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...