Javascript Google Maps API CIRCLES - マウスの数値情報を表示する

私は次のgoogle mapsのサンプルコードを使い始めました。それは、都市の上を動くサークル、より多くの人口、より大きなサークルを示しています。サークルだけでなく、マウスオーバー時の数値データも表示することができます。それは素晴らしいことだ。Javascript Google Maps API CIRCLES - マウスの数値情報を表示する

誰でもお手伝いできますか？

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

をし、各サークルのためInfoWindowを作成します：

<!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>

出典

2016-09-30 Frankie Frankie

あなたがしたいと言うとき"サークルだけでなく人と一緒に人口を示すことができるようにマウスオーバー時の数値データ "、あなたはツールチップを要求していますか？またはマウスオーバーで開く[infowindow]（https://developers.google.com/maps/documentation/javascript/infowindows）？ – geocodezip

infowindowは完璧です。ありがとう！ –

あなたはforループ内のハンドラを追加することができ

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フィドル：https://jsfiddle.net/rh54o4th/1/

出典

2016-09-30 14:54:42

ありがとうございます、魅力のように動作します。 –

Javascript Google Maps API CIRCLES - マウスの数値情報を表示する

答えて

関連する問題