[英]how to resize custom svg marker using data setStyle on geojson point feature
This should be fairly trivial to fix but I cant figure out why my custom marker disappears when I set the icon width and height. 这应该很简单,但是我无法弄清楚为什么在设置图标的宽度和高度时自定义标记会消失。
The svg icon appears fine on the map before trying to resize it... https://jsfiddle.net/joshmoto/pzhjc6d7 尝试调整大小之前,svg图标在地图上看起来不错... https://jsfiddle.net/joshmoto/pzhjc6d7
But when I add the sizing params via the map.data.setStyle
icon array, my marker disappears. 但是,当我通过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>
As soon as start adding these parameters below, my custom marker disappears. 一旦开始在下面添加这些参数,我的自定义标记就会消失。 And there are no errors in the console. 并且控制台中没有错误。
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)
}
});
Can anyone help understand whats going wrong here. 任何人都可以帮助您了解这里出了什么问题。 Thanks 谢谢
To scale that icon, set its scaledSize
to the desired size (and the anchor
where you want it, middle of the base seems a little strange to me, but it that is what you want, use Size(7,12)
as below): 要缩放该图标,请将其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)
}
});
});
code snippet: 代码段:
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>
You don't have to return the icon in your initialize function, you should set your icon to a new object with the new properties. 您不必在初始化函数中返回图标,您应该将图标设置为具有新属性的新对象。
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
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.