0

私の質問（更新）： AJAX呼び出しに基づいてAPI URL検索クエリでキーワードを変更するにはどうすればよいですか（ここでスコープの問題があります）？

リーフレットマップをAPIに接続して、ウィキペディアの記事を地理座標でプロットしました。URLの例は次のようになります。http://api.infochimps.com/encyclopedic/wikipedia/dbpedia/wikipedia_articles/search?g.radius=10000&g.latitude=30.3&g.longitude=-97.75&f.q=park&apikey=api_test-W1cipwpcdu9Cbd9pmm8D4Cjc469

ここまでは順調ですね。しかし、ユーザーが新しいクエリ用語を検索してマップをリロードできるようにするAJAX呼び出しを実装する方法に固執しています。検索ボックスをクリックすると、キーワードは検索ボックス内のテキストであることを警告します。ただし、マップは新しいキーワードに基づいて更新されません。

だから私はJSスクリプトとして持っています：

var map;
var pointsLayer;
var markerMap = {};
var keyword; //instantiating keyword for global scope


    $(document).ready(function(){
        map = new L.Map('mapContainer');
        var url = 'http://{s}.tiles.mapbox.com/v3/mapbox.mapbox-streets/{z}/{x}/{y}.png';

        var copyright = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade';
        var tileLayer = new L.TileLayer(url, {attribution:copyright});

        //var startPosition = new L.LatLng(42.33143, -83.04575);//detroit
        var startPosition = new L.LatLng(41.883333, -87.633333);//chicago
        //var startPosition = new L.LatLng(40.7143528, -74.0059731);//new york

        map.on('load', function(){
            keyword = 'history'; //setting keyword to history on first load
            requestUpdatedPoints();
            keyword = ''; //clearing keyword after first load

        });

        map.setView(startPosition, 13).addLayer(tileLayer);

        map.on('moveend', function(){
            requestUpdatedPoints();
        });


        //////////////
        /// WRONG ADDITION OF ADDING KEYWORD SEARCH?
        //////////////
        $('a#submitSearch').on('click', function(e, keyword){
            e.preventDefault();
            //keyword = '';
            keyword = $('input#keyword').val(); //setting keyword to whatever is in the search box
            alert(keyword); //did it set it? 
            requestUpdatedPoints(keyword); //send in new AJAX call with new keyword
            location.reload();

        });
    });

    function requestUpdatedPoints(keyword){
        $.ajax({
            type: 'GET',
            url: 'http://api.infochimps.com/encyclopedic/wikipedia/dbpedia/wikipedia_articles/search?g.radius=100000&g.latitude=41.883333&g.longitude=-87.633333&f.q='+this.keyword+'&apikey=api_test-W1cipwpcdu9Cbd9pmm8D4Cjc469',
            dataType: 'jsonp',
            //data: JSON.stringify(data),
            contentType: 'application/json; charset=utf-8',
            success: function(result){

                for( var i=0; i<result.results.length - 1; i++ ){

                    console.log("adding " + result.results[i].wikipedia_id + " to the map")
                    var marker = L.marker([result.results[i].coordinates[1], result.results[i].coordinates[0]]).addTo(map);
                    marker.bindPopup('<a href="'+result.results[i].url+'" target="_blank">'+result.results[i].wikipedia_id+'</a>');
                }
            },
            error: function(){
                alert('check your error log.');
            }
        });
    }

HTMLは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
<script type="text/javascript" src="./map.js"></script>
</head>
<body>
<h1>WikiMap</h1>
<div id="mapContainer"></div>
<div id="infoContainer">
    <div id="search">
        <form id="searchForm">
            <label>Keyword:</label>
            <input type="text" id="keyword" name="keyword" placeholder="search by keyword"/>
            <a id="submitSearch" href="#">search</a> 
        </form>
    </div>

</div>
</body>
</html>

私の質問（更新）： AJAX呼び出しに基づいてAPI URL検索クエリでキーワードを変更するにはどうすればよいですか（ここでスコープの問題があります）？

4

2 に答える 2

0

私はついに、自分のレイアウトが自分のやりたいことを達成するには不十分であることに気づきました。キーワードが更新されている場合でも、map.on（）ロード関数はすべてを最初に戻します。データフローを整理するためにBackbone.jsを使用することにしました。

于 2012-11-19T07:40:49.227 に答える
-2 
 var searchControl = L.esri.Geocoding.Controls.geosearch({
 providers: [
 new L.esri.Geocoding.Controls.Geosearch.Providers.MapService({
    label: 'States and Counties',
    url: 'http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer',
    layers: [2, 3],
    searchFields: ['NAME', 'STATE_NAME']
  })
  ]
  }).addTo(map);

住所によるリーフレットマップ検索APIを使用していますが、APIを検索する自動提案が何かを見つけました。

于 2015-08-11T15:03:40.363 に答える