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 回答