Это должно быть довольно тривиально, но я не могу понять, почему мой пользовательский маркер исчезает, когда я устанавливаю ширину и высоту значка.
Значок 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)
}
});
Может кто-нибудь помочь понять, что здесь происходит не так.Спасибо