0

Google マップで JavaScript の問題が発生しています。

コードは緯度と経度で動作するように作成されましたが、郵便番号で動作するように変換する必要があります。つまり、ジオコーディングを実装する必要があります。

以下のコードではすべてが動作し、脂肪を削減しようとしました。

最初の var は latLng に設定されます (提供された lat lng.

そのすぐ下に、私が苦労しているコードがあります。出来るだけ減らしました。

私はそれに入ることができますが、そこから結果を引き出すことはできません。

関数にラップされていましたが、その部分がなくなったので、見ているものを最小限に抑えることができました。

また、正常に動作するクラスタリングでも動作します。

したがって、問題は、マーカー位置 (latLng) に (latLngRaw) を供給すると、それがより良いもの (テスト) に変更されることです。

クロージャーの例を見てきましたが、解決策がわかりません。おそらく、コードの変更 (最小限のコード変更) に制限されているため、私を逃れているタッチポイントがいくつかあるようです。

コードのブロック全体は以下にありますが、アクションは spinnerUp 関数内で発生します

var latlng var マーカー var ジオコーダー

が問題です。

事前に助けてくれてありがとう。既存の機能のいくつかを明確にする必要がある場合はお知らせください。

var geocoder;
google.load('maps', '3', {
other_params: 'sensor=false'
});

google.setOnLoadCallback(initialize);
geocoder = new google.maps.Geocoder();

var markerClusterer = null;
var map = null;


    function initialize() {
    var center = new google.maps.LatLng(41.252,-96.009);

    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    for (var i = 0; i < data.count; i++) {
    spinnerUp(i);
    }

        function spinnerUp() {

            var data_mapper = data.locationstuff[i];

            var latLng = new google.maps.LatLng(data_mapper.latitude,data_mapper.longitude);

            var geocoder = new google.maps.Geocoder();
            geocoder.geocode( { 'address': data_mapper.zip}, function(results, status) {
                 if (status == google.maps.GeocoderStatus.OK) {
                     var latLngRaw = results[0].geometry.location;
                     alert(latLngRaw);
                     }
                     });






            var boxText = "<div>";
            var boxText = "<img src='http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2012/08/cute-baby-photo-27.jpg' width='75' align='left'/>";
                boxText += data_mapper.title + "<br>" + data_mapper.address + "<br>" + data_mapper.city + ", " + data_mapper.zip;
                boxText += "</div>";

            var iconColorSpecial = "/images/main/HeartDove.png";

            var marker = new google.maps.Marker({position: latLng, icon:iconColorSpecial});

            var infowindow = new google.maps.InfoWindow({
                                                    content: boxText
                                                    ,disableAutoPan: false
                                                    ,maxWidth: 0
                                                    ,pixelOffset: new google.maps.Size(0, 0)            
                                                    ,zIndex: null
                                                    ,closeBoxMargin: "10px 2px 2px 2px"
                                                    ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                                                    ,infoBoxClearance: new google.maps.Size(1, 1)
                                                    ,isHidden: false
                                                    ,pane: "floatPane"
                                                    ,enableEventPropagation: false});


        google.maps.event.addListener(marker, 'click', function() {infowindow.open(map, this);});
        markers.push(marker);       
        }

        var markerCluster = new MarkerClusterer(map, markers);
    }   

google.maps.event.addDomListener(window, 'load', initialize);

(更新): これは生成されたテスト データ セットです (最初の回答者のコード提案をテストしています)。

var data = { "count": 3,"locationstuff": [{"locaid": 1, "title": "test", "address": "545 Ave A ", "city": "Plattsmouth", "state": "NE", "zip": "68048", "longitude": -95.89, "latitude": 41.01, "iconSpecial": 0},{"locaid": 2, "title": "test2", "address": "14100 Crawford St. ", "city": "Boys Town", "state": "NE ", "zip": "68010", "longitude": -96.13, "latitude": 41.25, "iconSpecial": 0},{"locaid": 3, "title": "test3", "address": "1005 South 76th St. ", "city": "Omaha", "state": "NE", "zip": "68114 ", "longitude": -96.03, "latitude": 41.25, "iconSpecial": 0}]}
4

2 に答える 2

2

物事をシャッフルして少し片付けた後、私はこれになりました：

var map, 
    geocoder = new google.maps.Geocoder(),
    infoWinOpts = {
        content: null,//added later
        disableAutoPan: false,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(0, 0),
        zIndex: null,
        closeBoxMargin: "10px 2px 2px 2px",
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1),
        isHidden: false,
        pane: "floatPane",
        enableEventPropagation: false
    };

function spinnerUp(data_mapper) {
    infoWinOpts.content = [
        "<div><img src='http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2012/08/cute-baby-photo-27.jpg' width='75' align='left'/>",
        data_mapper.title + "<br>" + data_mapper.address + "<br>" + data_mapper.city + ", " + data_mapper.zip,
        "</div>"
    ].join('');
    var marker = new google.maps.Marker({
        position: data_mapper.latLng
        icon: "/images/main/HeartDove.png"
    });
    var infowindow = new google.maps.InfoWindow(infoWinOpts);
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, this);
    });
    return marker;
}

function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(41.252, -96.009);
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var markers = [];
    for (var responseCount=0, latLngRaw, i=0; i < data.count; i++) {
        var data_mapper = data.locationstuff[i];
        geocoder.geocode({
            'address': data_mapper.zip
        }, (function(data_mapper) {
            return function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    latLngRaw = results[0].geometry.location;
                    //alert(latLngRaw);
                    data_mapper.latLng = new google.maps.LatLng(latLngRaw.latitude, latLngRaw.longitude);//or something similar
                    markers.push( spinnerUp(data_mapper) );
                }
                responseCount++;
                if(responseCount == data.count) {
                    var markerCluster = new MarkerClusterer(map, markers);
                }
            }
        })(data_mapper));
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

テストされていない

いくつかのトリッキーな側面があります。

  • for ループの各パスでクロージャーを形成してトラップする必要性data_mapper。
  • responseCountいつ呼び出すかを決定するためにテストされるものを維持する必要性new MarkerClusterer()。
于 2013-07-19T02:04:41.093 に答える