Javascript 如何使用Textarea输入在地图上进行搜索_Javascript_Html_Leaflet_Textarea

Javascript 如何使用Textarea输入在地图上进行搜索

javascript html leaflet

Javascript 如何使用Textarea输入在地图上进行搜索,javascript,html,leaflet,textarea,Javascript,Html,Leaflet,Textarea,我在下面的HTML文件中使用了说明来放置地图。类似于我想让用户在地图上搜索地址。除了在我的例子中，我没有使用googlemaps，而且对于用户输入，我需要使用html输入元素。所以这个例子并没有真正帮助我。我的代码当前如下所示： <!DOCTYPE html>  <html><head> //skipping some lines <meta http-e

我在下面的HTML文件中使用了说明来放置地图。类似于我想让用户在地图上搜索地址。除了在我的例子中，我没有使用googlemaps，而且对于用户输入，我需要使用html输入元素。所以这个例子并没有真正帮助我。我的代码当前如下所示：

<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html><head>
//skipping some lines
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Quick Start - Leaflet</title>


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

    <link rel="shortcut icon" type="image/x-icon" href="https://leafletjs.com/examples/quick-start/docs/images/favicon.ico">

    <link rel="stylesheet" href="./Quick Start - Leaflet_files/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="">
    <script src="./Quick Start - Leaflet_files/leaflet.js.Download" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>



</head>
<body>

//skipping Elements

<div id="mapid" style="width: 600px; height: 400px; position: relative; outline: none;" class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" tabindex="0"><div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);"><div class="leaflet-pane leaflet-tile-pane"><div class="leaflet-layer " style="z-index: 1; opacity: 1;"><div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 18; transform: translate3d(0px, 0px, 0px) scale(1);"><img alt="" role="presentation" src="./Quick Start - Leaflet_files/2723.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(56px, -91px, 0px); opacity: 1;"><img alt="" role="presentation" src="./Quick Start - Leaflet_files/2723(1).png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(312px, -91px, 0px); opacity: 1;"><img alt="" role="presentation" src="./Quick Start - Leaflet_files/2724.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(56px, 165px, 0px); opacity: 1;"><img alt="" role="presentation" src="./Quick Start - Leaflet_files/2724(1).png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(312px, 165px, 0px); opacity: 1;"><img alt="" role="presentation" src="./Quick Start - Leaflet_files/2723(2).png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-200px, -91px, 0px); opacity: 1;"><img alt="" role="presentation" src="./Quick Start - Leaflet_files/2723(3).png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(568px, -91px, 0px); opacity: 1;"><img alt="" role="presentation" src="./Quick Start - Leaflet_files/2724(2).png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-200px, 165px, 0px); opacity: 1;"><img alt="" role="presentation" src="./Quick Start - Leaflet_files/2724(3).png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(568px, 165px, 0px); opacity: 1;"></div></div></div><div class="leaflet-pane leaflet-shadow-pane"><img src="./Quick Start - Leaflet_files/marker-shadow.png" class="leaflet-marker-shadow leaflet-zoom-animated" alt="" style="margin-left: -12px; margin-top: -41px; width: 41px; height: 41px; transform: translate3d(300px, 247px, 0px);"></div><div class="leaflet-pane leaflet-overlay-pane"><svg pointer-events="none" class="leaflet-zoom-animated" width="720" height="480" viewBox="-60 -40 720 480" style="transform: translate3d(-60px, -40px, 0px);"><g><path class="leaflet-interactive" stroke="red" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#f03" fill-opacity="0.5" fill-rule="evenodd" d="M141.20355555554852,171.94704600190744a42,42 0 1,0 84,0 a42,42 0 1,0 -84,0 "></path><path class="leaflet-interactive" stroke="#3388ff" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#3388ff" fill-opacity="0.2" fill-rule="evenodd" d="M358 163L474 219L550 153z"></path></g></svg></div><div class="leaflet-pane leaflet-marker-pane"><img src="./Quick Start - Leaflet_files/marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="" 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-pane leaflet-tooltip-pane"></div><div class="leaflet-pane leaflet-popup-pane"><div class="leaflet-popup  leaflet-zoom-animated" style="opacity: 1; transform: translate3d(301px, 213px, 0px); bottom: -7px; left: -57px;"><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><a class="leaflet-popup-close-button" href="https://leafletjs.com/examples/quick-start/example.html#close">×</a></div></div><div class="leaflet-proxy leaflet-zoom-animated" style="transform: translate3d(1.04805e+06px, 697379px, 0px) scale(4096);"></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="https://leafletjs.com/examples/quick-start/example.html#" title="Zoom in" role="button" aria-label="Zoom in">+</a><a class="leaflet-control-zoom-out" href="https://leafletjs.com/examples/quick-start/example.html#" title="Zoom out" role="button" aria-label="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="https://leafletjs.com/" title="A JS library for interactive maps">Leaflet</a> | Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a></div></div></div></div>
<script>

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

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(mymap);

    L.marker([51.5, -0.09]).addTo(mymap)
        .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

    L.circle([51.508, -0.11], 500, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(mymap).bindPopup("I am a circle.");

    L.polygon([
        [51.509, -0.08],
        [51.503, -0.06],
        [51.51, -0.047]
    ]).addTo(mymap).bindPopup("I am a polygon.");


    var popup = L.popup();

    function onMapClick(e) {
        popup
            .setLatLng(e.latlng)
            .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(mymap);
    }

    mymap.on('click', onMapClick);

</script>
//skipping elements
<div>
<textarea class="longInput" cols="98.5" rows="1" id="OrtTextfield"></textarea></div>


//skipping elements.....


</body></html>


//跳过几行
快速入门-单张
//跳过元素
你好，世界<我是一个弹出窗口地图数据©贡献者，图像©
var mymap=L.map（'mapid'）.setView（[51.505，-0.09]，13）；
L.tileLayer（'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？access_token=pk.eyj1ijoibwwwwym94iiwiysi6imnpejy4nxvycta2emycxbdhrqcmz3n3gifq.rjfig214ariislb6b5aw'{
maxZoom:18，
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:“地图盒。街道”
}).addTo（mymap）；
L.标记（[51.5，-0.09]）。添加到（mymap）
.bindPopup（“你好，世界！
我是一个弹出窗口。”）.openPopup（）；
L.圆圈（[51.508，-0.11]，500{
颜色：“红色”，
填充颜色：“#f03”，
填充不透明度：0.5
}).addTo（mymap）.bindPopup（“我是一个圆圈”）；
L.多边形([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo（mymap）.bindPopup（“我是一个多边形”）；
var popup=L.popup（）；
函数onMapClick（e）{
弹出窗口
.setLatLng（即latlng）
.setContent（“您在“+e.latlng.toString（）处单击了地图”）
.openOn（mymap）；
}
mymap.on（'click'，onmaclick）；
//跳过元素
//正在跳过元素。。。。。

如何将HTML文件中的textarea元素绑定到嵌入式地图

您是否可以使用jquery var userInput=（“#OrtTextfield”）.html（）获取输入；这将为您提供输入中的文本并将其存储在变量中，然后您可以使用带有onClick事件的按钮将变量传递到map lookup API

希望这有帮助。我没有用过这些传单，但我会用谷歌地图来做。

看起来你的链接无效。你能删除你的2个链接标签和脚本标签并使用下面的2行吗

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>

查看他的存储库。map div前面有一个div findbox。您可以像示例中一样添加控件。@zakariah1，这并没有真正的帮助。出于某种原因，当我将上面链接中的代码保存到一个html文件并打开它时，我看不到任何映射。您的示例有“mapid”，但示例的id是“map”。问题可能就这么简单吗？@zakariah1，我没有将他的代码插入我的代码中。我基本上把他的代码保存到一个html文件中，我把它命名为outside.html。当我点击html文件时，我希望看到一些地图和搜索框等，我可以用它们来编写我自己的代码。但是，该html页面没有显示任何内容。它几乎是空的，听起来确实可行。我是一个html/javascript新手。希望，你不介意告诉我如何将变量传递到映射中？上面代码中的“userInput”在哪里？伙计，这仍然没有解决我的问题。此外，您在上面建议的链接在第102行使用一个名为

labs common.js

的.js文件作为src。他的页面上没有这个.js文件。