2017-09-25 10 views
-3

私はGoogleマップサークルの例を使用しています。ユーザーが丸で囲まれた都市を移動するたびにアラートボックスが表示されます。 はここしかし、円があったが、私は街をマウスオーバーすると、アラートボックスが表示されないコード -問題はjqueryでmouseoverイベントを使用しています

<script> 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</script> 
<body> 
<div id="map"></div> 
<script> 
    var citymap = { 
    chicago: { 
     center: {lat: 41.878, lng: -87.629}, 
     population: 2714856 
    }, 
    }; 
    function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 4, 
     center: {lat: 37.090, lng: -95.712}, 
     mapTypeId: 'terrain' 
    }); 

    for (var city in citymap) { 
     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 
     }); 
    } 
    } 
    var cityCircle= $('#mydiv'); 
    $(document).ready(function(){ 
     $('#mydiv').mouseover(function(){ 
     alert("welcome to chicago"); 
    }); 
}); 
</script> 
<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap"> 
</script> 

です。 私が間違っている場所に案内してください!おかげさまで

あなたのIDは、マウスオーバー機能で "mydiv" に設定されているが、あなたのdivは

EDIT "マップ" と命名され

+1

HTMLに「mydiv」はどこですか? – epascarello

+0

jqueryのidc "mydiv"をcitycircleに設定しました。それは動作しませんか? – ashes

+2

変数を変更すると、魔法のように再バインドされません... – epascarello

答えて

0

:あなたはループのために円を定義した後

google.maps.event.addListener(cityCircle,'mouseover',function() 
      {alert("welcome to chicago"); 
    }); 
0

cityCircle.addListener('mouseover', function() { 
    alert("welcome to chicaho"); 
    }); 
関連する問題