-1

私は場所（緯度と経度ではなく）を設定できるGoogleマップスクリプトを作成しようとしています.

1 つのアドレスを表示するスクリプトはありますが、複数のアドレスを実装するにはどうすればよいですか? 配列 ["London", "Odense C, Danmark", "something"] のように ?

また、ポインターは、デフォルトの Google マップのポイントではなく、画像 (コスチューム画像) である必要があります。これを試しましたが、何も表示されません。私を助けてください！

$(function () {
var geocoder = new google.maps.Geocoder();

function getPosition(address) {
    geocoder.geocode({
        "address": address
    }, function (results, status) {

        if (status == google.maps.GeocoderStatus.OK) {

            //Create the popup etc..
            var contentString = '<div id="
            content "><div id="
            siteNotice "></div><h2 id="
            firstHeading " class="
            firstHeading ">dsfdf</h2><div id="
            bodyContent "><p>Some text in here</p></div></div>';

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            google.maps.event.addListener(marker, "mouseover", function () {
                infoWindow.open(map, marker);
            });


            return results[0].geometry.location;
        }
    });
}




if ($("div#map").length) {
    // google map

    var name = "Stolen property";
    var address = "Odense, Denmark";


    geocoder.geocode({
        "address": "Odense Danmark"
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            var map = new google.maps.Map(document.getElementById("map"), {
                zoom: 15,
                center: results[0].geometry.location,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: false,
                disableDefaultUI: true
            });

            //Create 1
            var marker = new google.maps.Marker({
                position: getPosition("Brogade Odense Danmark"),
                map: map,
                title: name
            });

            //Create two!
            var marker = new google.maps.Marker({
                position: getPosition("Skibhusvej Odense Danmark"),
                map: map,
                title: name
            });

        }


        //Add it!


    });
}
});
4

1 に答える 1

1

ループを作成して、配列内の住所ごとにジオコーディングする必要があります。ここの質問で尋ねられたコード スニペットを参照してください: Google マップ V3 : 一部のマーカーのみが表示されます

マーカーの「アイコン」プロパティを使用して、マーカーのカスタム画像を設定することもできます。

var image = 'images/iconParcelB25.png';

var marker = new google.maps.Marker({
    position:latLng,
    map:map,
    title:projName,
    icon:image
});

このスニペットは、Web サイトのアセット内のローカル PNG を参照していますが、リモートで利用可能な画像 (つまり、http://www.example.com/images/theImage.jpg ) に対しても機能します。

編集:「画像とテキストを含むオーバーレイを追加する」という意味がわかりません。インフォウィンドウのことですか？これは、この種のより典型的な使用例です。

編集：これは私がすることです：

おそらくループ内で、説明的な場所/アドレスを変数に取得します。

var location = addresses[i];

場所と情報ウィンドウで必要なその他のテキストを参照して、新しい情報ウィンドウを作成します。カスタムの画像/テキストを含めたい場合は、コンテンツ文字列のマークアップに入れます:

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">+ location +</h2>'+
    '<div id="bodyContent">'+
    '<p>Some text in here</p>'+
    '</div>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

新しいマーカーを作成し、mouseOver イベントを設定して infoWindow を開き、mouseOut イベントを閉じます。また、アイコンをカスタム イメージに設定する必要があることにも注意してください。ここでは latlng を使用していますが、あなたのケースでは、コード スニペットで行うように、ジオコーディング サービスから出力された位置ジオメトリに位置を設定します。

var image = 'images/iconParcelB25.png';

        var marker = new google.maps.Marker({
            position:latLng,
            map:map,
            title:projName,
            icon:image
        });

//sets up the mouseover listener
google.maps.event.addListener(marker, 'mouseover', function() {
    infoWindow.open(map,marker);
});

//sets up the mouseout listener
google.maps.event.addListener(marker, 'mouseout', function() {
    infoWindow.close(map,marker);
});
于 2013-02-23T13:54:59.563 に答える