[英]how to resize custom svg marker using data setStyle on geojson point feature
这应该很简单,但是我无法弄清楚为什么在设置图标的宽度和高度时自定义标记会消失。
尝试调整大小之前,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)
}
});
任何人都可以帮助您了解这里出了什么问题。 谢谢
要缩放该图标,请将其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>
您不必在初始化函数中返回图标,您应该将图标设置为具有新属性的新对象。
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.