1
In der folgenden Google Map habe ich Event-Listener auf mouseover und mouseout für meine Marker und die Datenschicht, die Daten entsprechend angezeigt.Google Maps Mouseover mit Markern und Datenschicht Verhalten
Das Problem, das ich habe, ist, dass, wenn die Maus einen Marker verlässt, es nicht die Informationen von der Datenschicht anzeigt. Ich habe dies mit einem einzelnen Marker und Layer versucht und das Verhalten funktioniert wie erwartet. Was mache ich falsch?
Ich füge die Ereignis-Listener auf jedem und Event-Listener auf der Ebene map.data hinzu.
var map = null;
var markers = [];
var $info = $('#info');
var mapOptions = {
center: null,
zoom: 12,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_BOTTOM
},
};
google.maps.event.addDomListener(
window,
'load',
initialize
);
function initialize() {
map = new google.maps.Map(
document.getElementById('map-canvas'),
mapOptions
);
addSchools();
addWards();
// Style wards
map.data.setStyle(function(feature) {
return {
fillColor: 'green',
fillOpacity: 0.2,
strokeWeight: 1,
strokeColor: 'grey'
};
});
// Info on wards
map.data.addListener('mouseover', function(event) {
var title = event.feature.getProperty('title');
$info.html(title).show();
})
map.data.addListener('mouseout', function(event) {
$info.hide();
})
};
function addWards() {
var wards = JSON.parse(document.getElementById('wards').innerHTML);
for (var i = 0; i < wards.length; i++) {
var geoJsonLayer = wards[i];
$.ajax({
url: geoJsonLayer.Url,
dataType: 'json',
type: 'GET',
title: geoJsonLayer["Ward Name"],
success: function(data) {
var layer = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": data,
"properties": {
"title" : this.title
}
}
]
}
map.data.addGeoJson(layer);
}
})
}
}
function addSchools() {
var bounds = new google.maps.LatLngBounds();
var schools = JSON.parse(document.getElementById('schools').innerHTML);
for (var i = 0; i < schools.length; i++) {
var latlng = new google.maps.LatLng(schools[i].Latitude, schools[i].Longitude);
var marker = new google.maps.Marker({
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 6,
fillColor: 'yellow',
fillOpacity: 0.9,
strokeWeight: 1,
strokeColor: 'grey'
},
position: latlng,
title: schools[i].School,
zIndex: 999
})
google.maps.event.addListener(marker, 'mouseover', function() {
$info.html(this.title).show();
});
google.maps.event.addListener(marker, 'mouseout', function() {
$info.hide();
});
bounds.extend(latlng);
}
map.fitBounds(bounds);
};html, body, #map-canvas {
width: 100%;
height: 100%;
margin: 0;
}
#info {
background: white;
border: 1px solid gray;
display: none;
font-family: Roboto,Arial,sans-serif;
overflow: hidden;
padding: 5px;
position: absolute;
right: 10px;
top: 10px;
width: 400px;
}
#info h1 {
border-bottom: 1px solid gray;
font-size: 16px;
margin: 0;
padding-bottom: 4px;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
#info th {
padding-right: 10px;
text-align: left;
}<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQVBfiFu8nTpJHZ-O9TdoxCew4Fmf8ahU"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> \t
<div id="map-canvas"></div>
<div id="info"></div>
<script type="application/json" id="schools">
[
{
"School": "University of Huddersfield",
"Latitude": 53.643714,
"Longitude": -1.777711
},
{
"School": "Islamia Girls' High School",
"Latitude": 53.644997,
"Longitude": -1.787971
},
{
"School": "Mount Pleasant Junior School",
"Latitude": 53.635446,
"Longitude": -1.793422
},
{
"School": "Mount Pleasant Primary School",
"Latitude": 53.635446,
"Longitude": -1.793422
},
{
"School": "Mount Pleasant Infant and Nursery School",
"Latitude": 53.636496,
"Longitude": -1.792781
},
{
"School": "Thornton Lodge Nursery School",
"Latitude": 53.636373,
"Longitude": -1.799875
},
{
"School": "Spring Grove Junior Infant and Nursery School",
"Latitude": 53.643891,
"Longitude": -1.791611
},
{
"School": "Greenhead College",
"Latitude": 53.647023,
"Longitude": -1.793668
},
{
"School": "Paddock Junior Infant and Nursery School",
"Latitude": 53.644532,
"Longitude": -1.809245
},
{
"School": "Huddersfield Grammar School",
"Latitude": 53.648293,
"Longitude": -1.812012
},
{
"School": "St David's School",
"Latitude": 53.648293,
"Longitude": -1.812012
},
{
"School": "Birkby Infant and Nursery School",
"Latitude": 53.656977,
"Longitude": -1.791138
},
{
"School": "Rathbone Choices",
"Latitude": 53.649792,
"Longitude": -1.788904
},
{
"School": "Mountjoy House School",
"Latitude": 53.651409,
"Longitude": -1.793404
},
{
"School": "Highfields School",
"Latitude": 53.653566,
"Longitude": -1.793379
},
{
"School": "Edgerton College",
"Latitude": 53.653885,
"Longitude": -1.801109
},
{
"School": "Birkby Junior School",
"Latitude": 53.658602,
"Longitude": -1.784578
},
{
"School": "New Directions College",
"Latitude": 53.647137,
"Longitude": -1.772398
}
]
</script>
<script type="application/json" id="wards">
\t [
\t {
\t \t "Ward Name":"Almondbury",
\t \t "Url":"http://mapit.mysociety.org/area/135207.geojson"
\t },
\t {
\t \t "Ward Name":"Ashbrow",
\t \t "Url":"http://mapit.mysociety.org/area/8998.geojson"
\t },
\t {
\t \t "Ward Name":"Crossland Moor and Netherton",
\t \t "Url":"http://mapit.mysociety.org/area/135206.geojson"
\t },
\t {
\t \t "Ward Name":"Dalton",
\t \t "Url":"http://mapit.mysociety.org/area/9005.geojson"
\t },
\t {
\t \t "Ward Name":"Greenhead",
\t \t "Url":"http://mapit.mysociety.org/area/9003.geojson"
\t },
\t {
\t \t "Ward Name":"Lindley",
\t \t "Url":"http://mapit.mysociety.org/area/9002.geojson"
\t },
\t {
\t \t "Ward Name":"Newsome",
\t \t "Url":"http://mapit.mysociety.org/area/8996.geojson"
\t }
\t ]
</script>
Ich kann nicht die Schichten auf der Karte sehen ... Bin ich etwas fehlt? – gkb
Sie sollten als grüne Grenzen mit gelben Markierungen erscheinen, keine Probleme beim Ausführen des Code-Snippets – mheptinstall