我创建了一个使用 Leaflet 在里面。
在Map所在的屏幕上，还有一个 progressBar 我允许用户在特定半径内搜索。
当他们更改progressbar中的值时，它会更改Map中圆标记的大小。
我想我的Map将改变它的缩放，以适应它的圆圈。
我加载Map的代码是：
String Map_HTML = "<html>\n" +
"<head>\n" +
"\n" +
" <title>Quick Start - Leaflet</title>\n" +
"\n" +
" <meta charset=\"utf-8\" />\n" +
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n" +
"\n" +
" <link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"docs/images/favicon.ico\" />\n" +
"\n" +
" <link rel=\"stylesheet\" href=\"https://unpkg.com/leaflet@1.4.0/dist/leaflet.css\" integrity=\"sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==\" crossorigin=\"\"/>\n" +
" <script src=\"https://unpkg.com/leaflet@1.4.0/dist/leaflet.js\" integrity=\"sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==\" crossorigin=\"\"></script>\n" +
"\n" +
"\n" +
"\n" +
"<style>\n" +
"body {\n" +
"padding: 0;\n" +
"margin: 0;\n" +
"}\n" +
"html, body, #map {\n" +
"height: 100%;\n" +
"width: 100%;\n" +
"}\n" +
"</style>\n" +
"</head>\n" +
"<body>\n" +
"\n" +
"\n" +
"\n" +
"<div id=\"mapid\" style=\"width: " + dpWidth + "px; height: " + dpHeight * 0.3 + "px;\"></div>\n" +
"<script>\n" +
"\n" +
"var mymap = L.map('mapid',{zoomControl: false}).setView([" + Lat + ", " + Lon + "], 10);\n" +
"\n" +
" L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n" +
" minZoom: 7,\n" +
" maxZoom: 17,\n" +
" attribution: '© <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors' \n" +
" }).addTo(mymap);\n" +
"\n" +
"mymap.attributionControl.setPosition('topleft')\n" +
"L.control.zoom({\n" +
"position: 'bottomright'\n" +
"}).addTo(mymap);\n" +
"L.marker([" + Lat + ", " + Lon + "]).addTo(mymap)\n" +
" .bindPopup(\"<b>My Location</b>\").openPopup();\n" +
"\n" +
"L.circle([" + Lat + ", " + Lon + "], " + Radius + ", {\n" +
" color: 'red',\n" +
" fillColor: '#8275FE',\n" +
" fillOpacity: 0.4,\n" +
" weight: '0'\n" +
"}).addTo(mymap);\n" +
"\n" +
"\n" +
"var popup = L.popup();\n" +
"\n" +
"</script>\n" +
"\n" +
"</body>\n" +
"</html>";哪里 Radius 是基于 progressBar .
现在它总是用zoom:10初始化Map，因为我不知道如何根据需要动态更改它。
有什么办法吗？
谢谢您
1条答案
按热度按时间tez616oj1#
这张Map可以与圆的边界相吻合
mymap.fitBounds(circle.getBounds());.将代码更改为：