2

これはかなり新しい...配列からのデータを使用して、Googleマップ上にマーカーの動的リストを生成しようとしています(後でWordpressサイトの投稿情報から動的に入力されます)。

さらに以下は、静的データを使用した簡略化されたバージョンのコードです。私が抱えている問題は、「アイコン」キーに配列の 5 番目の値 (つまり pinImageX) を割り当てることができないように見えることです。

以下は正常に機能します...しかし、明らかにすべてのマーカーを1つのピンスタイルで表示します

icon: pinImage1,

しかし、次の使用は機能しません

icon: locations[i][4],

キーに配列の値を正しく割り当てるための構文が欠けているように感じます:(

var locations = [
['Marker1', -50, 100, 1, 'pinImage1'],
['Marker2', -51, 101, 2, 'pinImage2'],
['Marker3', -52, 102, 3, 'pinImage3'],
];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: new google.maps.LatLng(-50, 100),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;
        var pinColor1 = "FF0000";
        var pinColor2 = "00FF00";
        var pinColor3 = "0000FF";

            var pinImage1 = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor1,
            new google.maps.Size(21, 34),
            new google.maps.Point(0,0),
            new google.maps.Point(10, 34));

            var pinImage2 = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor2,
            new google.maps.Size(21, 34),
            new google.maps.Point(0,0),
            new google.maps.Point(10, 34));

            var pinImage3 = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor3,
            new google.maps.Size(21, 34),
            new google.maps.Point(0,0),
            new google.maps.Point(10, 34));

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon: locations[i][4],
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
4

2 に答える 2

1

icon文字列ではなく、google.maps.MarkerImageオブジェクトへの直接参照を取ります。あなたがしなければならないことは、すべてのアイコンMarkerImageオブジェクトを連想配列またはオブジェクトに格納することです (あなたの空想に合う方。オブジェクトは甘い甘いプロトタイプ関数に便利かもしれません)、そこから戻ります。

これは、以前の雇用主のサイトでこれをどのように回避したかです。

        if (markerInfo.icon == undefined || markerInfo.icon == "") {
            for(var i=0; i<this.options.categories.length;i++) {
                if (this.options.categories[i].id == markerInfo.category) {
                    markerURLpic = this.options.categories[i].icon;
                }
            }
        }

これは、マーカー生成関数の一部でした。本質的に、これにより、ユーザーは何気なく文字列を送信し、残りはルックアップを行うことができました。すべてのMarkerImageオブジェクトは に格納されthis.options.categoriesます。

お役に立てれば。

于 2013-03-29T09:21:17.790 に答える
0

可変変数の概念は、スコープがないとうまく機能しないため、スコープとして機能するピン画像を含むオブジェクトを作成する必要があります。

var pinImages = {
    pinImage1:
        new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor1,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34)),

    pinImage2:
        new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor2,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34)),

    pinImage3:
        new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor3,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34))
};

そして、次のように画像を参照できます。

marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    icon: pinImages[locations[i][4]],
    map: map
});
于 2013-03-29T09:24:30.900 に答える