单击jQuery嵌套弹出窗口中的列表项的Center Leaflet映射

时间：2014-02-18 04:19:31

标签： jquery html leaflet geojson mapbox

我正在尝试为学术会议制作一张基于Leaflet的小地图。从本质上讲，它向会议参观者展示了美国肯塔基州列克星敦各个景点的位置。这些地方分为6类：会议地点，餐厅，酒吧，咖啡，住宿和其他。

我能够成功地将外部geoJSON图层加载并设置到我的地图上，但我尝试使用jQuery-mobile嵌套弹出窗口添加更多功能。上面的类别是标题，地名列在相应的类别下。

目标：当用户在嵌套弹出框中点击/触摸某个地点的名称时，地图会以该点的纬度/经度为中心。理想情况下，关于该点的弹出信息也会显示出来，但重新定心是最重要的部分。

现在，我已经看到MapBox Cloudless Atlas Tour的一个示例与我所描述的类似，但是它的每个点的位置数据都是硬编码为HTML中的数组（？）。我宁愿继续从外部源加载我的geoJSON图层，但是我很难弄清楚如何使用上述目标来处理它。 （在我目前的设置中，我的geoJSON文件的变量似乎不是全局的，我不能很好地连接点以解决这个问题。）

问题1 ：如何将地名链接到地图中的位置？

问题2 ：当嵌套弹出窗口中点击地名时，如何告诉地图重新定位特定的纬度/经度？

以下是我的代码。它也可以在github上访问。下面的代码是test.html，geoJSON文件是dope-places.gejson。谢谢你的任何指导。我是编码新手，但渴望了解更多信息。

    <!DOCTYPE html>
<html>
<!--+++++++++++++++++++++++++++++++++++++++++++++++++++++-->
<head>
<meta charset=utf-8 />
<title>Leaflet Test</title>
<!--LIBRARIES & EXTERNAL SHIT-->
<!--INCLUDE LEAFLET CSS-->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    <!--INCLUDE LEAFLEET JS FILE-->
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
    <!--INCLUDE jQUERY-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!--INCLUDE jQUERY-MOBILE-->
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
    <script src="//code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>

<!--CSS-->
  <style>

  /*BODY STYLE*/
  body { 
    margin:0; 
    padding:0; 
  }
  /*MAP STYLE*/
    #dope-map { 
    position:absolute; 
    top:0; bottom:0;
    width:100%
  }
  </style>
</head>
<!--+++++++++++++++++++++++++++++++++++++++++++++++++++++-->
<body>
<!--DIV CONTAINER FOR MAP-->
  <div id="dope-map"></div>

<!--nav tabs-->
<a href="#popupNested" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-b" data-transition="pop">Choose a location...</a>
<div data-role="popup" id="popupNested" data-theme="none">
    <div data-role="collapsibleset" data-theme="b" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">
        <div data-role="collapsible" data-inset="false">
        <h2>Conference Location</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog" id="18">Fine Arts Library</a></li>
                <li><a href="#" data-rel="dialog" id="15">Gaines Center</a></li>
                <li><a href="#" data-rel="dialog" id="17">Memorial Colliseum Parking</a></li>
                <li><a href="#" data-rel="dialog" id="16">Memorial Hall</a></li>
                <li><a href="#" data-rel="dialog" id="21">Parking Structure #5</a></li>
                <li><a href="#" data-rel="dialog" id="14">Student Center</a></li>
                <li><a href="#" data-rel="dialog" id="20">Student Center Parking</a></li>
                <li><a href="#" data-rel="dialog" id="19">White Hall Classroom Building</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
        <h2>Restaurant</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog" id="37">Alfalfa Restaurant</a></li>
                <li><a href="#" data-rel="dialog" id="47">Bangkok House</a></li>
                <li><a href="#" data-rel="dialog" id="44">Chipotle</a></li>
                <li><a href="#" data-rel="dialog" id="40">Doodles Restaurant</a></li>
                <li><a href="#" data-rel="dialog" id="35">Great Bagel</a></li>
                <li><a href="#" data-rel="dialog" id="45">Han Woo Ri</a></li>
                <li><a href="#" data-rel="dialog" id="46">Joe Bologna's</a></li>
                <li><a href="#" data-rel="dialog" id="43">King Tut</a></li>
                <li><a href="#" data-rel="dialog" id="34">Mellow Mushroom</a></li>
                <li><a href="#" data-rel="dialog" id="38">Oasis Mediterranean Restaurant</a></li>
                <li><a href="#" data-rel="dialog" id="42">Pazzo's</a></li>
                <li><a href="#" data-rel="dialog" id="39">Sam's Hot Dog Stand</a></li>
                <li><a href="#" data-rel="dialog" id="18">Sarah Mediterranean</a></li>
                <li><a href="#" data-rel="dialog" id="31">Stella's Kentucky Deli</a></li>
                <li><a href="#" data-rel="dialog" id="33">The Local Taco</a></li>
                <li><a href="#" data-rel="dialog" id="32">The Village Idiot</a></li>
                <li><a href="#" data-rel="dialog" id="30">Tolly-Ho</a></li>
                <li><a href="#" data-rel="dialog" id="41">Village Host Pizza</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
        <h2>Bar</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog" id="1">Al's Bar</a></li>
                <li><a href="#" data-rel="dialog" id="54">Arcadium</a></li>
                <li><a href="#" data-rel="dialog" id="3">The Beer Trappe</a></li>
                <li><a href="#" data-rel="dialog" id="7">Chevy Chase Inn</a></li>
                <li><a href="#" data-rel="dialog" id="6">Country Boy Brewing</a></li>
                <li><a href="#" data-rel="dialog" id="10">Green Lantern</a></li>
                <li><a href="#" data-rel="dialog" id="9">Grey Goose</a></li>
                <li><a href="#" data-rel="dialog" id="5">Lynagh's Irish Pub</a></li>
                <li><a href="#" data-rel="dialog" id="4">Side Bar Grill</a></li>
                <li><a href="#" data-rel="dialog" id="8">Soundbar</a></li>
                <li><a href="#" data-rel="dialog" id="2">West Sixth Brewery</a></li>
                <li><a href="#" data-rel="dialog" id="41">Wine and Market</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
        <h2>Coffee</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog" id="12">Coffea</a></li>
                <li><a href="#" data-rel="dialog" id="55">Common Grounds</a></li>
                <li><a href="#" data-rel="dialog" id="57">National Boulangerie</a></li>
                <li><a href="#" data-rel="dialog" id="11">North Lime Coffee &amp; Donuts</a></li>
                <li><a href="#" data-rel="dialog" id="13">Third Street Stuff &amp; Coffee</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
        <h2>Lodging</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog" id="26">Gratz Park Inn</a></li>
                <li><a href="#" data-rel="dialog" id="24">Holiday Inn Express Hotel &amp; Suites</a></li>
                <li><a href="#" data-rel="dialog" id="23">Hyatt Regency Lexington</a></li>
                <li><a href="#" data-rel="dialog" id="25">Spring Hill Suites</a></li>
                <li><a href="#" data-rel="dialog" id="22">University Inn</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
        <h2>Other</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog" id="27">Blue Grass Airport</a></li>
            </ul>
        </div><!-- /collapsible -->
    </div><!-- /collapsible set -->
</div><!-- /popup -->
<!--SCRIPTS-->
  <script>
    //TILES AS A VARIABLE
    var tiles = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.jpg', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.</a>',
    maxZoom: 18
    });

    //STYLE MARKERS
    var geojsonMarkerOptions = {
      radius: 8,
      color: "#000",
      weight: 1,
      opacity: 1,
      fillOpacity: 0.8
    };

    //GET geoJSON USING jQUERY FUNCTION AND MAP IT
     $.getJSON("./dope-places.geojson", function(data) {
      var geojson = L.geoJson(data, {
        onEachFeature: function (feature, layer) {
          layer.bindPopup(feature.properties.Name + "<br>" + feature.properties.Add);
        },
        pointToLayer: function (feature, latlng) {
          return L.circleMarker(latlng, geojsonMarkerOptions);
        },
        style: function(feature) {
            switch (feature.properties.Type) {
                case 'Conference Location': return {color: "#4daf4a"}; //GREEN
                case 'Restaurant':   return {color: "#e41a1c"}; //RED
                case 'Bar': return {color: "#377eb8"}; //BLUE
                case 'Coffee':   return {color: "#984ea3"}; //PURPLE
                case 'Lodging': return {color: "#ff7f00"}; //ORANGE
                case 'Other':   return {color: "#ffff33"}; //YELLOW
                ;
              }
        }
      });

      //DRAW MAP IN DIV WITH BOUNDS, TILES, AND geoJSON
       var map = L.map('dope-map').fitBounds(geojson.getBounds());
        tiles.addTo(map);
        geojson.addTo(map);
        });
  </script>
</body>
<!--+++++++++++++++++++++++++++++++++++++++++++++++++++++-->
</html>

1 个答案:

答案 0 :(得分：0)

您可以在“onEachFeature”

中添加您的JQuery点击事件 
onEachFeature: function (feature, layer) {
   var popup = layer.bindPopup(feature.properties.Name + "<br>" + feature.properties.Add);
   $('#'+feature.properties.ID).click(function() {
        map.panTo( 
           new L.LatLng( feature.properties.latitude, feature.properties.longitude)
        );
        popup.openPopup();
   });
},
pointToLayer: [...]

毫克

相关问题
最新问题