1

Google Map API の使用に問題があります。マップ上に円をプロットし、各円にマウスオーバー イベントを作成して、時間値を表示する情報ウィンドウを開きたいと考えています。

最初の問題は、サークルごとに情報ウィンドウの内容が変わらないことです。2 つ目の問題は、なんらかの理由で情報ウィンドウがポップアップしないことです。

誰か助けてくれませんか？

ありがとう

コードは次のとおりです。

function initialize() {
        data={};
        data[0]={
            center: new google.maps.LatLng(51.49799,-0.196145),
            population: 1000,
            time:"2013-03-01T03:31:18Z"
        };
        data[1]={
            center: new google.maps.LatLng(51.496294,-0.188184),
            population: 1000,
            time:"2013-03-01T13:21:15Z"
        };
        data[2]={
            center: new google.maps.LatLng(51.497817,-0.178313),
            population: 1000,
            time:"2013-03-04T04:03:50Z"
        };

        var mapOptions = {
            zoom: 15,
            center: new google.maps.LatLng(51.494438, -0.188907),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);

        var movingColour= '#FF0000';
        var counter=0;
        for (var city in data) {
            // Construct the circle for each value in citymap. We scale population by 20.
            //movingColour=ColorLuminance(movingColour, -0.005) ;
            var populationOptions = {
                strokeOpacity: 0.35,
                strokeWeight: 2,
                strokeColor:movingColour,
                fillColor:movingColour ,
                fillOpacity: 0.35,
                map: map,
                clickable:true,              
                center: data[city].center,
                radius: data[city].population / 20
            };
            var circle = new google.maps.Circle(populationOptions);         
            var infowindow =new google.maps.InfoWindow({
                content: data[city].time
            });  
            google.maps.event.addListener(circle, 'mouseover', function(ev) {
                alert(infowindow.content);
                infowindow.open(map,circle);
            });
            counter++;    

        }
        google.maps.event.addDomListener(window, 'load', initialize);
    }
4

2 に答える 2

3

これは、InfoWindows のマーカーで通常見られる一般的な問題であり、さまざまな方法で解決できます。.open のオプションの 2 番目のパラメーターはマーカーにしかできないため、InfoWindow は開いていません。それがなければ、マーカーを開く位置を設定する必要があります。私は通常、InfoWindow コンテンツの問題を解決するために関数クロージャを使用します (他の方法があります)。

function initialize() {
    data={};
    data[0]={
        center: new google.maps.LatLng(51.49799,-0.196145),
        population: 1000,
        time:"2013-03-01T03:31:18Z"
    };
    data[1]={
        center: new google.maps.LatLng(51.496294,-0.188184),
        population: 1000,
        time:"2013-03-01T13:21:15Z"
    };
    data[2]={
        center: new google.maps.LatLng(51.497817,-0.178313),
        population: 1000,
        time:"2013-03-04T04:03:50Z"
    };

    var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(51.494438, -0.188907),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);

    var movingColour= '#FF0000';
    var counter=0;
    for (var city in data) {
        var populationOptions = {
            strokeOpacity: 0.35,
            strokeWeight: 2,
            strokeColor:movingColour,
            fillColor:movingColour ,
            fillOpacity: 0.35,
            map: map,
            clickable:true,              
            center: data[city].center,
            radius: data[city].population / 20
        };
        var circle = new google.maps.Circle(populationOptions);         
        createClickableCircle(map, circle, data[city].time); 
        counter++;    

    }
    google.maps.event.addDomListener(window, 'load', initialize);
}

function createClickableCircle(map, circle, info){
       var infowindow =new google.maps.InfoWindow({
            content: info
        });  
        google.maps.event.addListener(circle, 'mouseover', function(ev) {
            // alert(infowindow.content);
            infowindow.setPosition(circle.getCenter());
            infowindow.open(map);
        });
 }

(おそらく、InfoWindow を閉じるためのリスナーを追加する必要があります。)

于 2013-03-19T15:58:29.377 に答える
1

で定義するのを忘れていたより良い構文と名前付き変数を持つように、JavaScript を少し書き直しますvar。

たとえば、data={};使用を定義するvar data=[];には、オブジェクトを含む配列として使用することが以下でわかるようにします。また、情報ウィンドウが既に開いている円の上にカーソルを移動すると、ちらつき効果が停止するように修正しました。

// To stop flickering.. we wont reopen until necessary
// We open only if position has been changed or infowindow is not visible
if(infowindow.getPosition() !== this.getCenter() || infowindowClosed === true) {
   // this can be used to access data values
   infowindow.setContent(this.data.time); 
   infowindow.setPosition(this.getCenter());
   infowindow.open(map);
   infowindowClosed = false;
}

initialize();その他の機能強化には、いくつかの変数をメソッドの上でグローバルとして定義することが含まれます。

コメントで作業フィドルをチェックしてください。

于 2013-03-19T16:27:11.643 に答える