程序员经验分享-hwhale

传单地图中奇怪的默认尺寸

2024-04-02

我已经拍摄了一张可用的 Leaflet 地图，但是当我添加 JQuery Mobile 标题和后退按钮时，格式变得疯狂。

最初加载页面时，所有内容都加载在左上角，但是当页面在桌面上调整到最小大小或在移动设备上旋转时，一切都很好。

这是打开后的样子：

以及旋转后的样子（以及应该是什么样子）：

这是页面的代码

<!DOCTYPE html>
<html>
<head>
<title>Toronto CAD Activity Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/leaflet.css" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/tfscad.mobile.css" />
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/jquery.mobile-1.4.5.min.js"></script>
<script src="../js/iframeResizer.contentWindow.js"></script>

<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
<style>
#mapPage {
  height: calc(100% - 42px);
}

#map {
  height: 100%;
}

#map-content{
  height: 100%;
  padding: 0px; 
  margin:0px;
  z-index: -1;
}
#curLoc{
  position: absolute;
  bottom: 0;
  left: 10px;
}
</style>
</head>


<body>
<body>
    <div data-role="page" id="mapPage" data-theme="a"> 
        <div data-role="header" data-position="fixed" data-theme="a">
            <a id="backButton" href="#" data-rel="back" 
                data-transition="slide" data-direction="reverse">Back</a>
            <h1>Toronto CAD Map</h1>
        </div> 

        <div id="map-content" data-role="content">
            <div id="map"></div>
        </div>
        <a id="curLoc" data-role="button" data-icon="location" data-iconpos="notext"></a>

    </div> 
<script src="../js/jquery-1.11.1.min.js"></script> 
<script src="../js/leaflet.js"></script> 

<script type="text/javascript">
	window.onload = function() {
getGeoJson();
getTPSJson();
};
	
    var map = L.map('map').setView([43.7178,-79.3762], 11);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade',
			            }).addTo(map);



function getGeoJson(){
	
  // load GeoJSON from an external file
  $.getJSON("../appdata/geo.json",function(data){

      L.geoJson(data  ,{
    pointToLayer: function(feature,latlng){
    			
    			var TFS = new L.icon({
					  iconUrl: '../images/tfs_logo.png',
						iconSize:     [22, 22],
						popupAnchor:  [0, -22]
						});

					var TPS = new L.icon({
					  iconUrl: '../images/tps_logo.png',
						iconSize:     [22, 22],
						popupAnchor:  [0, -22]
						});

					var ESC = new L.icon({
					  iconUrl: '../images/tps_logo.png',
						iconSize:     [22, 22],
						popupAnchor:  [0, -22]
						});									
	if(feature.properties.icon == 'TFS'){
    var marker = L.marker(latlng,{icon: TFS});
  marker.bindPopup('<strong>' + feature.properties.event_type + '</strong><br/>' + feature.properties.OPEN_DT);
  return marker; 
    
  }else if(feature.properties.icon == 'TPS'){
    var marker = L.marker(latlng,{icon: TPS});
  marker.bindPopup('<strong>' + feature.properties.event_type + '</strong><br/>' + feature.properties.OPEN_DT);
  return marker; 

  }else if(feature.properties.icon == 'ESC'){    
    var marker = L.marker(latlng,{icon: ESC});
  marker.bindPopup('<strong>' + feature.properties.event_type + '</strong><br/>' + feature.properties.OPEN_DT);
  return marker; 
  }
      }
  }  ).addTo(map);
  });	
	
	
}

function getTPSJson(){
	
var myStyle = {
  "color": "#ff7800",
  "weight": 5,
  "opacity": 0,
  "offset": 1.5
};

  // load GeoJSON from an external file
  $.getJSON("../appdata/TPSDiv.json",function(myLines){

 L.geoJson(myLines, {
style: myStyle
}).addTo(map);
})
}


 setInterval(function()
{ 
	
getGeoJson();

}, 10000);//time in milliseconds  

    function onClick(e) {
        //console.log(this.options.win_url);
        window.open(this.options.win_url);
    }
 
    
</script>
</body>

jQuery Mobile 有自己的方式来创建页面div的，所以你最好坚持参加 JQM 活动。

Here https://jqmtricks.wordpress.com/2014/02/15/preload-google-maps-jquery-mobile/是一个很棒的帖子Omar https://stackoverflow.com/users/1771795/omar其中解释了如何解决加载 Google 地图时的这个（典型）问题。你应该等待pagecontainershow或者使用占位符提前预加载地图。

在下面的示例中，您会发现 Leaflet 的这种方法的变体，它使用相同的canvasHeight()函数（另请参阅此处的答案：设置内容高度 100% jquery mobile https://stackoverflow.com/questions/21552308/set-content-height-100-jquery-mobile).

我注意到您即将为地理位置功能实现页脚按钮，因此为了您的方便，我还向您展示了一种可能的方法（来源：每“x”秒自动获取当前用户位置以放在传单地图上？ https://gis.stackexchange.com/a/182084).

请注意：我必须重新定位默认地图属性，这样它就不会与页脚按钮重叠。

var map, actualPosition, actualAccuracy, autoUpdate;

function canvasHeight(canvas) {
  var mapPage = $("#page-map"),
    screen = $.mobile.getScreenHeight(),
    header = $(".ui-header", mapPage).hasClass("ui-header-fixed") ? $(".ui-header", mapPage).outerHeight() - 1 : $(".ui-header", mapPage).outerHeight(),
    footer = $(".ui-footer", mapPage).hasClass("ui-footer-fixed") ? $(".ui-footer", mapPage).outerHeight() - 1 : $(".ui-footer", mapPage).outerHeight(),
    newHeight = screen - header - footer;
  $(canvas).height(newHeight);
}

$(window).on("throttledresize orientationchange", function() {
  canvasHeight("#map");
})

function onLocationFound(e) {
  var radius = e.accuracy / 2;
  actualPosition = L.marker(e.latlng).addTo(map);
  actualAccuracy = L.circle(e.latlng, radius).addTo(map);
}

function onLocationError(e) {
  alert(e.message);
}

function showLocation() {
  if (actualPosition) {
    map.removeLayer(actualPosition);
    map.removeLayer(actualAccuracy);
  }
  map.locate({setView: true,maxZoom: 16});
}

function loadMap(canvas) {
  map = L.map(canvas).setView([43.7178, -79.3762], 11);
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);
  map.on('locationfound', onLocationFound);
  map.on('locationerror', onLocationError);
  // Your custom initialization
  //getGeoJson();
  //getTPSJson();
}

function toggleAutoUpdate() {
  if (autoUpdate) {
    $("#autoUpdate").removeClass("ui-btn-active");
    clearInterval(autoUpdate);
    autoUpdate = null;
    if (actualPosition) {
      map.removeLayer(actualPosition);
      map.removeLayer(actualAccuracy);
    }
  } else {
    $("#autoUpdate").addClass("ui-btn-active");
    showLocation();
    autoUpdate = setInterval(function() {
      showLocation();
      // Your custom Update
      //getGeoJson();
    }, 10 * 1000);
  }
}

$(document).on("pagecontainershow", function(e, ui) {
  if (ui.toPage.prop("id") == "page-map") {
    canvasHeight("#map");
    if (!map) {
      loadMap("map");
    }
  }
});
#map {
  margin: 0;
  padding: 0;
}

#page-map .footer {
  position: fixed;
  z-index: 1000;
  bottom: .1em;
  width: 100%;
}

#footer-button {
  width: 100%;
  text-align: center;
  background: transparent;
}

#map-attribution {
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
}

.leaflet-control-attribution.leaflet-control {
  display: none;
}

/* Don't show scrollbars on SO code snippet */
.ui-mobile .ui-page {
  min-height: 100px !important;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.js"></script>
</head>
<body>
  <div data-role="page" id="page-map">
    <div data-role="header" data-position="fixed" data-theme="a">
      <a href="#" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>
      <h1>Toronto CAD Map</h1>
    </div>

    <div id="map" data-role="content">
      <div class="footer">
        <div id="footer-button">
          <button id="autoUpdate" onclick="toggleAutoUpdate();" class="ui-btn ui-btn-inline ui-corner-all ui-icon-location ui-btn-icon-notext"></button>
        </div>
        <div id="map-attribution">
          <a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade
        </div>
      </div>
    </div>
  </div>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

jquerymobile

leaflet

传单地图中奇怪的默认尺寸 的相关文章

随机推荐

  • 如何纠正文件的字符编码？

    我有一个 ANSI 编码的文本文件 该文件不应该被编码为 ANSI 因为有重音符号 ANSI 不支持的字符 我宁愿使用 UTF 8 数据能否正确解码或者在转码过程中丢失 我可以使用什么工具 这是我所拥有的示例 我可以从上下文 咖啡馆应该是咖

  • Ng-Bootstrap Datepicker，如何在 Angular4 中突出显示特定日期

    我有一系列任务 每个任务都包含一个日期 我想突出显示日期选择器中的匹配日期 但似乎无法在文档中找到如何完成它 有人能帮忙吗 https ng bootstrap github io components datepicker api htt

  • 为什么我的电脑上已经有camelot却找不到camelot？

    这是我尝试导入camelot的代码 import camelot as cl 这是回应 ModuleNotFoundError Traceback most recent call last

  • 行动委托的协变和逆变

    我被困住了 为什么这不起作用 var childAction new Action

  • Android - Textview 在状态改变时改变颜色

    如何在 TextView 的各种状态 聚焦 按下 启用 上应用颜色 我已经提到过这一点 http developer android com reference android content res ColorStateList html

  • Ruby - 解析通过 URL 传入的 JSON

    我正在使用 javascript 将 JSON 对象发送到 ruby 但我无法在那里解析它 我尝试了以下内容 但没有运气 我也已经四处寻找了一段时间 但找不到任何有用的东西 请注意 我是一个非常新的红宝石 我的试验 def initiali

  • 在C#中优化多重调度通知算法？

    抱歉 我想不出更好的方法来描述这个问题 基本上 我正在尝试在游戏中实现碰撞系统 我希望能够注册一个 碰撞处理程序 来处理可以转换为特定类型的两个对象 以任一顺序给出 的任何碰撞 因此 如果Player Ship Entity and Las

  • 在 MATLAB 中翻转 y 轴

    有没有办法在matlab图中将y轴颠倒 使y轴的正方向而不是向上 指向下 我求求你了 请不要说 打印出来 然后把纸翻过来 The YDir 轴属性 https www mathworks com help matlab ref axes p

  • mysqldump 命令的 Windows 批处理文件

    这是我第一次制作 Windows 批处理文件 我不想先做实验 因为它与实时服务器相关 我用以下方式备份 mySql 数据库 打开命令提示符 写 mysqldump u user p DBname gt C DBname sql 然后cmd询

  • 是否可以从特定参数继承文档？

    Visual Studio 2017 ReSharper 2017 C 项目 我试图通过使用继承方法参数的文档select属性 但它似乎没有按预期工作 根据这篇文章 http tunnelvisionlabs github io SHFB

  • 如何查询5米范围内的所有数据？

    我正在使用 GeoDjango 和 PostGIS 然后我遇到了如何查询我的 postgres db 表以获取 5 米距离内的所有数据的麻烦 UPDATES1我正在使用 GeoDjango 1 2 7 我从这个网址找到了一些东西https

  • 使用 JAXB Marshaller 处理 XML 转义字符（例如引号）

    我需要使用 JAXB Marshaller JAXB 版本 2 2 将 XML java 对象序列化为 XML 文件 现在在 xml 对象中 我有一个标签 其中包含字符串值这样 lt tagA gt lt YYYYY gt done lt

  • ASP.NET Web 服务错误地返回 XML 而不是 JSON

    我正在尝试使用 jQuery 从 javascript 使用 ASMX Web 服务 当我要求 XML 时它工作得很好 但我想利用 net 的 JSON 序列化功能 这也开始让我烦恼 这不起作用 Web 服务的代码 using System

  • 像 Javascript“Math.round()”那样的 Pythonic 方式“r​​ound()”？

    我想要最 Pythonic 的方式来舍入数字 就像 Javascript 那样 通过Math round 它们实际上略有不同 但这种差异会对我的应用程序产生巨大的影响 Using round Python 3 中的方法 Returns th

  • 如何在 codeigniter 中使用 .htaccess 限制图像文件夹

    我有包含图像文件夹的 codeigniter 项目 我想让它无法通过直接 url 访问假设有人输入 url http localhost project images Pricelistupdated pdf 然后它将直接在浏览器选项卡中打

  • 课堂上的自定义事件

    我需要从类启动自定义事件 我知道用 DOM 对象和 jquery 来做到这一点 使用triggerHandler 比如 object triggerHandler inputChange param X 问题是当我在一个类中尝试这个时 如下

  • 如何以编程方式使用 ical 从重复集中删除单个事件？

    我在 10 11 日创建了一个重复事件 请参见下文 我想删除第 10 个事件 因此我使用了方法 取消 但由于 UID 相同 两条记录都将被删除 如何只删除一条记录 我应该使用任何其他值 例如 UID 吗 BEGIN VCALENDAR PR

  • XML 格式错误

    我有一个 php 脚本 用于将 xml 数据写入文件 另一个脚本将该文件的内容作为响应发送到客户端 但在客户端 我收到以下错误 XML 解析错误 格式不正确当我查看页面源时 我看到的 XML 如下

  • 制作多个文件强制下载

    抱歉 如果标题没有解释太多 让我尝试进一步解释 我的代码如下所示

  • 传单地图中奇怪的默认尺寸

    我已经拍摄了一张可用的 Leaflet 地图 但是当我添加 JQuery Mobile 标题和后退按钮时 格式变得疯狂 最初加载页面时 所有内容都加载在左上角 但是当页面在桌面上调整到最小大小或在移动设备上旋转时 一切都很好 这是打开后的样

热门标签