0

私はGoogle Maps APIを使って作業を進めており、これまでのところ次のとおりです。

var infowindow = null;

$(document).ready(function () { initialize();  });

function initialize() {

    var centerMap = new google.maps.LatLng(39.828175, -98.5795);

    var myOptions = {
        zoom: 4,
        center: centerMap,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

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

    setMarkers(map, sites);
    infowindow = new google.maps.InfoWindow({
            content: "loading..."
        });

    var bikeLayer = new google.maps.BicyclingLayer();
    bikeLayer.setMap(map);
}

var sites = [
    ['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'],
    ['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
    ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
    ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
];



function setMarkers(map, markers) {

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            zIndex: sites[3],
            html: sites[4]
        });

        var contentString = "Some content";

        google.maps.event.addListener(marker, "click", function () {
            //alert(this.html);
            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
    }
}

Fiddleを作成しようとしましたが、表示されませんでした。

そのため、マップは複数の場所と情報ボックスをサポートしていますが、私がまだ非常に混乱している部分はカスタム情報ボックスです. 私はいくつかの検索を行い、この質問/回答を見ましたが、それがどのように機能するかを正確に理解するのに苦労しています. たとえば、#map_canvasマップがあり、その外側に既存の#infodiv (各情報ボックスをロードしたい場所) があるとします。そのため、スタイルは Google Maps API で定義されていません。これは、情報ボックスとして引き継がれる既存の要素です。

これを行う方法をよりよく理解するのを助けるために、誰かが私を微調整することができますか (または、この場合、突き出すのは素晴らしいことです)? 私が考えていることの簡単なスクリーンショットは、ここにあります。マップ上部の濃い赤のボックスがターゲットです。

カスタム マーカーと「アクティブ」状態 (選択したマーカーの金色のアイコン) も別の課題ですが、まだすべての希望をあきらめていません。どんな助けでも大歓迎です。ありがとう！

4

1 に答える 1

1

しばらく経ちましたが、これでうまくいくはずです。

マーカーを作成するときは、追加したいデータをこのマーカーに追加します。

ここでは setMarkers 関数を使用しています。追加してよかったです（ループがどこにあるのだろうと思っていました）

htmlでは、divにこのデータを次のように取得させます

 <div id="myDivID"></div>

あなたのjsにそれへの参照を追加し、そこにhtmlを挿入します

function setMarkers(map, markers) {
    var myContentDiv = document.getElementById('myDivID');//Reference to you DOM elem  

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            zIndex: sites[3],
            html: sites[4]
        });

        var contentString = "Some content";
        //marker.xtraData = 'SomeExtraData';//You can even add more data this way

        google.maps.event.addListener(marker, "click", function () {
            //alert(this.html);
            var myTemplate = '<h1>'+this.title+'<h1><p>'+this.html+'</p>';

            myContentDiv.innerHTML = myTemplate;//Inset this html inside link
            //infowindow.setContent(this.html);
            //infowindow.open(map, this);
        });
    }
}

あなたが何をしているかによっては、リーフレットをチェックすることもできます. モバイル ブラウザの Google マップよりもかなり高速で、ios6 マップよりも優れています。

于 2012-10-04T02:45:52.843 に答える