Question

我的问题（已更新）： 如何根据AJAX调用（此处存在范围问题）在API URL搜索查询中更改关键字？

我将传单地图与API连接起来，用地理坐标绘制维基百科的文章。示例网址如下所示：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 &copy; 2011 OpenStreetMap contributors, Imagery &copy; 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搜索查询中更改关键字？

Answer 1

我终于认为我的布局很差，无法完成我想要完成的任务。即使关键字正在更新，map.on（）加载函数也会将所有内容还原为开头。我决定使用Backbone.js来帮助我组织数据流。

Answer 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的东西。

Leaflet - 将关键字搜索调用更新为restful api并刷新地图

2 个答案: