2

アーティストの場所のマーカーが付いたカスタム Google マップがあります。8種類のマーカーを作りたいです。マーカーの配列を作成し、カテゴリを割り当てる必要があることについて読みましたが、正直なところ、どこから始めればよいかわかりません..

この質問は、私が望むものに近いと思います: カテゴリごとに Google マップ マーカーのオン/オフを切り替えます。それを機能させようとしましたが、役に立ちませんでした。知識が少なすぎます。

これが私のHTMLです。マップといくつかのチェックボックスが用意されていますが、チェックボックスはまだ使用されていません。

<body onload="initialize()">

<div id="map_container">
    <div id="map_canvas" style="width:700px; height:350px">
    </div>
</div>

<div id="map_filter">
    <form action="#">
      <input type="checkbox" id="beeldend" onclick="displayMarkers(1)" /><label>Beeldende kunst</label><br />
      <input type="checkbox" id="film" onclick="displayMarkers(2)" /><label>Film/fotografie</label><br />
      <input type="checkbox" id="dans" onclick="displayMarkers(3)" /><label>Dans</label>
    </form> 
</div>

</body>

そして、これが私のJSです。私は cat1 の影と cat1 のアイコンを持っていますが、これは 8 種類あるはずですが、これはおそらくそれを行う方法ではないので、読みやすくするために 1 つの猫だけにしました。次に、独自の pos、shadow などを持つ 1 つのマーカー (art1) があります。

function initialize() {
var latlng = new google.maps.LatLng(52.0840356, 5.1546501);
var settings = {
    zoom: 13,
    center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+
    '<div id="bodyContent">'+
    '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+
    '</div>'+
    '</div>';
var infowindow = new google.maps.InfoWindow({
    content: contentString
});

var cat1Shadow = new google.maps.MarkerImage('images/shadow.png',
    new google.maps.Size(130,50),
    new google.maps.Point(0,0),
    new google.maps.Point(65, 50)
);

var cat1Icon = new google.maps.MarkerImage('images/beeldend.png',
    new google.maps.Size(100,50),
    new google.maps.Point(0,0),
    new google.maps.Point(50,50)
);

var art1Pos = new google.maps.LatLng(52.0840356, 5.1546501);
var art1Marker = new google.maps.Marker({
    position: art1Pos,
    map: map,
    icon: cat1Icon,
    shadow: cat1Shadow,
    title:"Beeldende kunst",
    zIndex: 4
});

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

}

だから.. マーカーのさまざまな配列を作成し、チェック ボックスでそれらの可視性を切り替える最良の方法は何ですか?

また、座標を調べる代わりに、アドレスをマーカーに割り当てられるようにしたいと考えています。

ありがとうございました

4

2 に答える 2

6

さまざまなマーカーの配列を作成する最良の方法は、次のようなことです。8 つのカテゴリのマーカーがあると言ったので、これを 8 回行います。

var locations = [

                 ['Shanghai', 31.232, 121.47, 5885],
                 ['Beijing', 39.88, 116.40, 6426],
                 ['Guangzhou', 23.129, 113.264, 4067],
                 ['Shenzhen', 22.54, 114.05, 3089],
                 ['Hangzhou', 30.27, 120.15, 954],
                 ['Hong Kong', 22.39, 114.10, 1885]
               ];

function getMarkers() {
    for (i = 0; i < locations.length; i++) { 
            marker[i] = new MarkerWithLabel({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                draggable: false,
                map: map,
                    labelContent: locationsCA[i][3],
                icon: new google.maps.MarkerImage(iconArray[i]),
                labelAnchor: new google.maps.Point(30, 0),
                labelClass: "labels", // the CSS class for the label
                 labelStyle: {opacity: 0.75}
            });

チェック ボックスによるトグル表示に関する 2 番目の質問については、チェック ボックスの作成方法がわかりませんが、トグル機能はイベント トリガーを使用して簡単に実装できます。マーカーのクリック、ズーム、またはその他のイベント (イベントのドキュメントを確認してください) のいずれであっても、そのイベントに続くアクションを設定できます。ここに例があります。

google.maps.event.addListener(map,'zoom_changed',function () {
         if (map.getZoom() >= 4) {
            hideMarkers();          
         }
}

そして、このコマンドを使用して hideMarkers() 関数を使用して非表示にします

marker.setVisible(false);

それが役立つことを願っています

于 2012-06-21T16:22:18.637 に答える