1. ホーム
  2. 質問と答え
  3. ドロップアニメーションを使用した複数のマーカーのインフォウィンドウを作成する方法

ドロップアニメーションを使用した複数のマーカーのインフォウィンドウを作成する方法

2012-05-11 13 views
0

一定の間隔で複数のマーカーをドロップするようにコード化されていますが、ドロップアニメーションなしで複数のインフォボックスを作成する方法もわかりました。アニメーション。私は両方で1つを必要とし、私はこれに苦しんでいるように私はJavaScriptに新しいです。ドロップアニメーションを使用した複数のマーカーのインフォウィンドウを作成する方法

<script type="text/javascript"> 
    var bounds = new google.maps.LatLngBounds(); 
    var berlin = new google.maps.LatLng(13.00843, 80.21215); 

    var neighborhoods = [ new google.maps.LatLng(13.00843, 80.21215), 
    new google.maps.LatLng(13.00881, 80.21143), 
    new google.maps.LatLng(13.00861, 80.21085), 
    new google.maps.LatLng(13.00859, 80.21085), 
    new google.maps.LatLng(13.00859, 80.21085), 
    new google.maps.LatLng(13.00859, 80.21085), 
    new google.maps.LatLng(13.00859, 80.21085), 
    new google.maps.LatLng(13.00859, 80.21085), 
    new google.maps.LatLng(13.00859, 80.21085), 
    new google.maps.LatLng(13.00859, 80.21085), 
    new google.maps.LatLng(13.00859, 80.21085), 
    new google.maps.LatLng(13.00859, 80.21085), 
    new google.maps.LatLng(13.00859, 80.21085), 
    new google.maps.LatLng(13.00859, 80.21085), 
    new google.maps.LatLng(13.00859, 80.21085), 
    new google.maps.LatLng(13.00859, 80.21085), 
    new google.maps.LatLng(13.00856, 80.21071), 
    new google.maps.LatLng(13.00856, 80.21053), 
    new google.maps.LatLng(13.00843, 80.21023), 
    new google.maps.LatLng(13.00838, 80.20999), 
    new google.maps.LatLng(13.00804, 80.20887), 
    new google.maps.LatLng(13.00777, 80.207), 
    new google.maps.LatLng(13.0076, 80.20554), 
    new google.maps.LatLng(13.00701, 80.20469), 
    new google.maps.LatLng(13.00532, 80.20192), 
    new google.maps.LatLng(13.00388, 80.20111), 
    new google.maps.LatLng(13.00238, 80.2005), 
    new google.maps.LatLng(13.00189, 80.19991), 
    new google.maps.LatLng(13.00192, 80.19675), 
    new google.maps.LatLng(13.00011, 80.19431), 
    new google.maps.LatLng(12.99835, 80.19217), 
    new google.maps.LatLng(12.99555, 80.18887), 
    new google.maps.LatLng(12.9911, 80.18111), 
    new google.maps.LatLng(12.9874, 80.17626), 
    new google.maps.LatLng(12.98264, 80.16883), 
    new google.maps.LatLng(12.97428, 80.15462), 
    new google.maps.LatLng(12.96853, 80.14983), 
    new google.maps.LatLng(12.96691, 80.149), 
    new google.maps.LatLng(12.9623, 80.14663), 
    new google.maps.LatLng(12.96064, 80.14581), 
    new google.maps.LatLng(12.95152, 80.14029), 
    new google.maps.LatLng(12.94606, 80.13628), 
    new google.maps.LatLng(12.93716, 80.12813), 
    new google.maps.LatLng(12.92727, 80.11845), 
    new google.maps.LatLng(12.92727, 80.11845), 
    new google.maps.LatLng(12.92727, 80.11845), 
    new google.maps.LatLng(12.92727, 80.11845), 
    new google.maps.LatLng(12.92727, 80.11845), 
    new google.maps.LatLng(12.91545, 80.1045), 
    new google.maps.LatLng(12.90816, 80.09801), 
    new google.maps.LatLng(12.88163, 80.08141), 
    new google.maps.LatLng(12.86243, 80.07368), 
    new google.maps.LatLng(12.85883, 80.07145), 
    new google.maps.LatLng(12.83887, 80.05463), 
    new google.maps.LatLng(12.81113, 80.03094), 
    new google.maps.LatLng(12.78636, 80.01549), 
    new google.maps.LatLng(12.75723, 80.00227), 
    new google.maps.LatLng(12.73914, 79.99043), 
    new google.maps.LatLng(12.69862, 79.96948), 
    new google.maps.LatLng(12.66697, 79.95867), 
    new google.maps.LatLng(12.62878, 79.93155), 
    new google.maps.LatLng(12.5874, 79.9173), 
    new google.maps.LatLng(12.55993, 79.91112), 
    new google.maps.LatLng(12.51569, 79.89052), 
    new google.maps.LatLng(12.48418, 79.86374), 
    new google.maps.LatLng(12.45468, 79.84108), 
    new google.maps.LatLng(12.4354, 79.83541), 
    new google.maps.LatLng(12.40707, 79.82117), 
    new google.maps.LatLng(12.38243, 79.79353), 
    new google.maps.LatLng(12.36767, 79.7822), 
    new google.maps.LatLng(12.32709, 79.77705), 
    new google.maps.LatLng(12.30646, 79.75113), 
    new google.maps.LatLng(12.28969, 79.7216), 
    new google.maps.LatLng(12.27879, 79.7077), 
    new google.maps.LatLng(12.26285, 79.68298), 
    new google.maps.LatLng(12.25832, 79.67903), 
    new google.maps.LatLng(12.91417, 80.22938), 
    new google.maps.LatLng(12.923964, 80.12469), 
    new google.maps.LatLng(12.8791617, 80.18394), 
    new google.maps.LatLng(13.00843, 80.21215), 
    new google.maps.LatLng(13.00843, 80.21215)]; 



    var markers = []; 
    var iterator = 0; 

    var map; 
    function initialize() { 
    var mapOptions = { 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: berlin 
    }; 


    map = new google.maps.Map(document.getElementById("map_canvas"), 
      mapOptions); 
    setMarkers(map, neighbourhoods); 


    } 

    function drop() { 
    for (var i = 0; i < neighborhoods.length; i++) { 
     setTimeout(function() { 
     addMarker(); 
     }, i * 1000); 


     } 
    } 



    var image = 'images/car_icon_small.png'; 
    function addMarker() { 
    var marker=markers.push(new google.maps.Marker({ 
     position: neighborhoods[iterator], 
     map: map, 
     draggable: false, 
    icon: image, 
    title: neighborhoodsName[iterator], 
     animation: google.maps.Animation.DROP 
    })); 

    iterator++; 
    } 

</script>

出典

2012-05-11 Padhu

+1

「複数の情報ウィンドウを作成しようとしていました」というコードを投稿できますか？ – Engineer

答えて

1

長い試行の後、私は私の問題を解決しました。ここで私は何をしたのですか：

<script type="text/javascript"> 
var bounds = new google.maps.LatLngBounds(); 
var berlin = new google.maps.LatLng(13.00843, 80.21215); 

var neighborhoods = [ new google.maps.LatLng(13.00843, 80.21215), 
new google.maps.LatLng(13.00881, 80.21143), 
new google.maps.LatLng(13.00861, 80.21085), 
new google.maps.LatLng(13.00859, 80.21085), 
new google.maps.LatLng(13.00859, 80.21085), 
new google.maps.LatLng(13.00859, 80.21085), 
new google.maps.LatLng(13.00859, 80.21085), 
new google.maps.LatLng(13.00859, 80.21085), 
new google.maps.LatLng(13.00859, 80.21085), 
new google.maps.LatLng(13.00859, 80.21085), 
new google.maps.LatLng(13.00859, 80.21085), 
new google.maps.LatLng(13.00859, 80.21085), 
new google.maps.LatLng(13.00859, 80.21085), 
new google.maps.LatLng(13.00859, 80.21085), 
new google.maps.LatLng(13.00859, 80.21085), 
new google.maps.LatLng(13.00859, 80.21085), 
new google.maps.LatLng(13.00856, 80.21071), 
new google.maps.LatLng(13.00856, 80.21053), 
new google.maps.LatLng(13.00843, 80.21023), 
new google.maps.LatLng(13.00838, 80.20999), 
new google.maps.LatLng(13.00804, 80.20887), 
new google.maps.LatLng(13.00777, 80.207), 
new google.maps.LatLng(13.0076, 80.20554), 
new google.maps.LatLng(13.00701, 80.20469), 
new google.maps.LatLng(13.00532, 80.20192), 
new google.maps.LatLng(13.00388, 80.20111), 
new google.maps.LatLng(13.00238, 80.2005), 
new google.maps.LatLng(13.00189, 80.19991), 
new google.maps.LatLng(13.00192, 80.19675), 
new google.maps.LatLng(13.00011, 80.19431), 
new google.maps.LatLng(12.99835, 80.19217), 
new google.maps.LatLng(12.99555, 80.18887), 
new google.maps.LatLng(12.9911, 80.18111), 
new google.maps.LatLng(12.9874, 80.17626), 
new google.maps.LatLng(12.98264, 80.16883), 
new google.maps.LatLng(12.97428, 80.15462), 
new google.maps.LatLng(12.96853, 80.14983), 
new google.maps.LatLng(12.96691, 80.149), 
new google.maps.LatLng(12.9623, 80.14663), 
new google.maps.LatLng(12.96064, 80.14581), 
new google.maps.LatLng(12.95152, 80.14029), 
new google.maps.LatLng(12.94606, 80.13628), 
new google.maps.LatLng(12.93716, 80.12813), 
new google.maps.LatLng(12.92727, 80.11845), 
new google.maps.LatLng(12.92727, 80.11845), 
new google.maps.LatLng(12.92727, 80.11845), 
new google.maps.LatLng(12.92727, 80.11845), 
new google.maps.LatLng(12.92727, 80.11845), 
new google.maps.LatLng(12.91545, 80.1045), 
new google.maps.LatLng(12.90816, 80.09801), 
new google.maps.LatLng(12.88163, 80.08141), 
new google.maps.LatLng(12.86243, 80.07368), 
new google.maps.LatLng(12.85883, 80.07145), 
new google.maps.LatLng(12.83887, 80.05463), 
new google.maps.LatLng(12.81113, 80.03094), 
new google.maps.LatLng(12.78636, 80.01549), 
new google.maps.LatLng(12.75723, 80.00227), 
new google.maps.LatLng(12.73914, 79.99043), 
new google.maps.LatLng(12.69862, 79.96948), 
new google.maps.LatLng(12.66697, 79.95867), 
new google.maps.LatLng(12.62878, 79.93155), 
new google.maps.LatLng(12.5874, 79.9173), 
new google.maps.LatLng(12.55993, 79.91112), 
new google.maps.LatLng(12.51569, 79.89052), 
new google.maps.LatLng(12.48418, 79.86374), 
new google.maps.LatLng(12.45468, 79.84108), 
new google.maps.LatLng(12.4354, 79.83541), 
new google.maps.LatLng(12.40707, 79.82117), 
new google.maps.LatLng(12.38243, 79.79353), 
new google.maps.LatLng(12.36767, 79.7822), 
new google.maps.LatLng(12.32709, 79.77705), 
new google.maps.LatLng(12.30646, 79.75113), 
new google.maps.LatLng(12.28969, 79.7216), 
new google.maps.LatLng(12.27879, 79.7077), 
new google.maps.LatLng(12.26285, 79.68298), 
new google.maps.LatLng(12.25832, 79.67903), 
new google.maps.LatLng(12.91417, 80.22938), 
new google.maps.LatLng(12.923964, 80.12469), 
new google.maps.LatLng(12.8791617, 80.18394), 
new google.maps.LatLng(13.00843, 80.21215), 
new google.maps.LatLng(13.00843, 80.21215)]; 



var markers = []; 
var iterator = 0; 

var map; 
function initialize() { 
var mapOptions = { 
    zoom: 10, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    center: berlin 
}; 


map = new google.maps.Map(document.getElementById("map_canvas"), 
     mapOptions); 
setMarkers(map, neighbourhoods); 


} 

function drop() { 
for (var i = 0; i < neighborhoods.length; i++) { 
    setTimeout(function() { 
    addMarker(); 
    }, i * 1000); 


    } 
} 



var image = 'images/car_icon_small.png'; 
function addMarker() { 
var marker=new google.maps.Marker({ 
    position: neighborhoods[iterator], 
    map: map, 
    draggable: false, 
icon: image, 
title: neighborhoodsName[iterator], 
    animation: google.maps.Animation.DROP 
}); 
var infowindow = new google.maps.InfoWindow({ 
     content:'Hello World' 
     }); 


     google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(map, marker); 
     }); 
    markers.push(marker); 

iterator++; 
} 


</script>

ありがとう。

もう1つ。マーカーが現在設定されている地図領域を超えて低下すると、マーカーを表示するために地図を移動したいのです。このコードでこれを行うにはどうすればいいですか？

出典

2012-05-13 03:30:57 Padhu

関連する問題

 関連する問題