Question

我在下面有一个简单的代码，它将在传单中显示一个地图，这里是

<!DOCTYPE html>
<!-- saved from url=(0054)http://leafletjs.com/examples/quick-start-example.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css">
</head>
<body>
    <div id="map" style="width: 600px; height: 400px; position: relative;" class="leaflet-container leaflet-fade-anim" tabindex="0"><div class="leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);"><div class="leaflet-tile-pane"><div class="leaflet-layer"><div class="leaflet-tile-container"></div><div class="leaflet-tile-container leaflet-zoom-animated"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 56px; top: -91px;" src="./Leaflet Quick Start Guide Example_files/2723.png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 312px; top: -91px;" src="./Leaflet Quick Start Guide Example_files/2723(1).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 56px; top: 165px;" src="./Leaflet Quick Start Guide Example_files/2724.png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 312px; top: 165px;" src="./Leaflet Quick Start Guide Example_files/2724(1).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -200px; top: -91px;" src="./Leaflet Quick Start Guide Example_files/2723(2).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 568px; top: -91px;" src="./Leaflet Quick Start Guide Example_files/2723(3).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -200px; top: 165px;" src="./Leaflet Quick Start Guide Example_files/2724(2).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 568px; top: 165px;" src="./Leaflet Quick Start Guide Example_files/2724(3).png"></div></div></div><div class="leaflet-objects-pane"><div class="leaflet-shadow-pane"><img src="./Leaflet Quick Start Guide Example_files/marker-shadow.png" class="leaflet-marker-shadow leaflet-zoom-animated" style="margin-left: -12px; margin-top: -41px; width: 41px; height: 41px; transform: translate3d(300px, 247px, 0px);"></div><div class="leaflet-overlay-pane"><svg class="leaflet-zoom-animated" width="1172" height="781" viewBox="-286 -191 1172 781" style="transform: translate3d(-286px, -191px, 0px);"><g><path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="red" stroke-opacity="0.5" stroke-width="5" fill="#f03" fill-opacity="0.5" class="leaflet-clickable" d="M183,130A42,42,0,1,1,182.9,130 z"></path></g><g><path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="#0033ff" stroke-opacity="0.5" stroke-width="5" fill="#0033ff" fill-opacity="0.2" class="leaflet-clickable" d="M358 163L474 219L550 153z"></path></g></svg></div><div class="leaflet-marker-pane"><img src="./Leaflet Quick Start Guide Example_files/marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-clickable" tabindex="0" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(300px, 247px, 0px); z-index: 247;"></div><div class="leaflet-popup-pane"><div class="leaflet-popup  leaflet-zoom-animated" style="opacity: 1; transform: translate3d(300px, 247px, 0px); bottom: 27px; left: -56px;"><a class="leaflet-popup-close-button" href="http://leafletjs.com/examples/quick-start-example.html#close">×</a><div class="leaflet-popup-content-wrapper"><div class="leaflet-popup-content" style="width: 74px;"><b>Hello world!</b><br>I am a popup.</div></div><div class="leaflet-popup-tip-container"><div class="leaflet-popup-tip"></div></div></div></div></div></div><div class="leaflet-control-container"><div class="leaflet-top leaflet-left"><div class="leaflet-control-zoom leaflet-bar leaflet-control"><a class="leaflet-control-zoom-in" href="http://leafletjs.com/examples/quick-start-example.html#" title="Zoom in">+</a><a class="leaflet-control-zoom-out" href="http://leafletjs.com/examples/quick-start-example.html#" title="Zoom out">-</a></div></div><div class="leaflet-top leaflet-right"></div><div class="leaflet-bottom leaflet-left"></div><div class="leaflet-bottom leaflet-right"><div class="leaflet-control-attribution leaflet-control"><a href="http://leafletjs.com/" title="A JS library for interactive maps">Leaflet</a> | Map data © <a href="http://openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com/">Mapbox</a></div></div></div></div>

    <script src="./Leaflet Quick Start Guide Example_files/leaflet.js"></script>
    <script>

        var map = L.map('map').setView([51.505, -0.09], 13);

        L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="http://mapbox.com">Mapbox</a>',
            id: 'examples.map-i875mjb7'
        }).addTo(map);




    </script>


</body></html>

我只是想问一下当我点击链接按钮

时如何传输或更改地图视图

Ex.
If i click Afghanistan
<button type="button">View Map of Afghanistan</button>
If i click iraq
<button type="button">View Map of Iraq</button>

我希望网站不会只刷新地图会改变。感谢任何帮助TY

Answer 1

你需要输入地图的正确ID（转到mapbox并从他们的一个示例中获取它或创建一个帐户并设置自己的一个）。你的div工作所需的唯一html标记是

<!DOCTYPE html>
<!-- saved from url=(0054)http://leafletjs.com/examples/quick-start-example.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css">
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   <style type="text/css">
     #map { height: 480px; }
     
   </style>
   
</head>
<body>
<div id="map"></div>
    
    
<script type="text/javascript">
      var map = L.map('map').setView([51.505, -0.09], 13);

        L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-i86nkdio/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="http://mapbox.com">Mapbox</a>',
            id: 'examples.map-i875mjb7'
        }).addTo(map);
      var gotocountry = function(c){
        // you get  afghanistan coordinates from google 
         if(c=='af')
         map.setView(new L.LatLng(34.5333, 69.1333), 6);
         if(c=='tn')
         map.setView(new L.LatLng(34,9), 6);
        return;
        
        
      };
     
   </script>
       

<br/>
<a onclick="gotocountry('af')"> Afghanistan</a>
<a onclick="gotocountry('tn')"> Tunisia</a>

</body></html>

here is a working example

如何更改Click Leaflet上的Map

1 个答案: