Javascript Google Maps API CIRCLES - Zeigen numerische Informationen über die Maus über

Ich begann mit den folgenden Google Maps Beispielcode. Es zeigt einen Kreis, der auf der Stadt schwebt, je mehr Einwohner, desto größer der Kreis. Ich möchte die Bevölkerung nicht nur mit dem Kreis, sondern auch mit den numerischen Daten über Mouseover zeigen können. Es wäre toll.Javascript Google Maps API CIRCLES - Zeigen numerische Informationen über die Maus über

Kann mir bitte jemand helfen?

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Circles</title> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 
     // This example creates circles on the map, representing populations in North 
     // America. 

     // First, create an object containing LatLng and population for each city. 
     var citymap = { 
     chicago: { 
      center: {lat: 41.878, lng: -87.629}, 
      population: 2714856 
     }, 
     newyork: { 
      center: {lat: 40.714, lng: -74.005}, 
      population: 8405837 
     }, 
     losangeles: { 
      center: {lat: 34.052, lng: -118.243}, 
      population: 3857799 
     }, 
     vancouver: { 
      center: {lat: 49.25, lng: -123.1}, 
      population: 603502 
     } 
     }; 

     function initMap() { 
     // Create the map. 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 4, 
      center: {lat: 37.090, lng: -95.712}, 
      mapTypeId: 'terrain' 
     }); 

     // Construct the circle for each value in citymap. 
     // Note: We scale the area of the circle based on the population. 
     for (var city in citymap) { 
      // Add the circle for this city to the map. 
      var cityCircle = new google.maps.Circle({ 
      strokeColor: '#FF0000', 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: '#FF0000', 
      fillOpacity: 0.35, 
      map: map, 
      center: citymap[city].center, 
      radius: Math.sqrt(citymap[city].population) * 100 
      }); 
     } 
     } 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
    </script> 
    </body> 
</html>

Quelle

2016-09-30 Frankie Frankie

Wenn Sie sagen, Sie würden "Ich möchte der Bevölkerung nicht nur den Kreis zeigen, sondern auch mit die numerischen Daten bei mouseover ", fragen Sie nach einem Tooltip? Oder ein [infowindow] (https://developers.google.com/maps/documentation/javascript/infowindows), das beim Mouseover geöffnet wird? – geocodezip

Ein Infowindow wäre perfekt. Vielen Dank! –

Sie können Handler innerhalb for Schleife hinzufügen:

handlePopulation(cityCircle, citymap[city].population, map);

Und dann InfoWindow für jeden Kreis erstellen:

function handlePopulation(cityCircle, popultion, map){ 
    var infoWindow= new google.maps.InfoWindow({ 
     content: popultion.toString(), 
     position: cityCircle['center'] 
     }); 

     google.maps.event.addListener(cityCircle, 'mouseover', function(ev){ 

      infoWindow.open(map); 
     }); 

     google.maps.event.addListener(cityCircle, 'mouseout', function(ev){ 
      infoWindow.close(); 
     }); 
    }

JS Geige: https://jsfiddle.net/rh54o4th/1/

Quelle

2016-09-30 14:54:42

Danke, funktioniert wie ein Zauber. –

Javascript Google Maps API CIRCLES - Zeigen numerische Informationen über die Maus über

Antwort

Verwandte Themen