2

私はグーグルマップのあるウェブページを持っています。JavaScript を使用して、json ファイルから取得した住所に基づいて地図上にマーカーを配置します。json ファイルには 7 つのアドレスがあります。

マップが読み込まれると、マップ上に 7 つのアイコンがすべて表示されますが、すぐに消えてしまい、境界ボックスでマップのサイズが変更されます。

コードが間違っているのでしょうか、それともマップ上に表示できるアイコンの数に制限がありますか? いくら住所を調べても、地図上には常に 5 つのアイコンが表示されます。その他はすべて削除されます。何百ものアイコンが表示されたマップを見たことがあるので、限界があるとは思えません。

アドレスごとに異なるアイコンを使用しています。そのため、カスタム アイコンを削除し、Google が提供する標準のアイコンを使用しました。同じ問題。だから、それはコードにあるようです。誰でも助けてください。

// JavaScript Document
$(document).ready(function() {

var addresses = [];
var address, company;
var geocoder, marker, thumbtack;

var bounds = new google.maps.LatLngBounds();    

// Set map options
    var options = {
    zoom:11,
    center: new google.maps.LatLng(Lat, Lng),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
};

// Create the map
var map = new google.maps.Map(document.getElementById('map'), options);
marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(Lat, Lng),
    title: "Your Zip Code"
});
//bounds.extend(new google.maps.LatLng(Lat, Lng));

    // Get the data
    // var listing is already set in footer.php
    processFile(listings);

function processFile(listings) {
        $.each(listings,function(business, info) {
            address = info[2];
            company = info[0];
            thumbtack = info[4];
            getCoordinates(address, company, thumbtack);
        });
    }


    function getCoordinates(address, company, thumbtack) {
    var counter = 0;
            // Check to see if we already have a geocoded object.  If not we create one.
    if(!geocoder) {
        geocoder = new google.maps.Geocoder();
    }

    // Create a GeocoderRequest object
    var geocoderRequest = {
        address: address
    }

    // Making the geocode request and adding marker
    geocoder.geocode(geocoderRequest, function(results, status) {
        // Check if status is OK before proceding
        if (status == google.maps.GeocoderStatus.OK) {
            addresses.push(results[0].geometry.location);
            counter++;
            marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                title: company,
                //icon: "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/marker" + thumbtack + ".png"
                                    icon: thumbtack
            });
            //bounds.extend(results[0].geometry.location);

            // Adjusting the map to new bounding box
                            //map.fitBounds(bounds);

        }

    });

};

});

4

1 に答える 1

0

一度に 1 つのマーカーしか表示されないように思えます。関数クロージャーを使用して 7 つのマーカーを作成できる createMarker 関数を追加することをお勧めします。

createMarker 関数を使用した例。

于 2012-07-22T17:06:09.833 に答える