javascript - jquerymobile 和 leaflet 方法不起作用-6ren

javascript - jquerymobile 和 leaflet 方法不起作用

转载作者：行者123 更新时间：2023-12-03 04:52:03

27

4

我为 Android 创建了一个简单的应用程序。我有错误:“脚本错误:$jq('#map')。panTo 不是函数”我尝试了很多更改，但错误仍然存在。我哪里错了？提前致谢。代码是:

<script>
    //Called after application is started.
    function OnStart()
    {
        
        	var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
 	    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 	    osm = L.tileLayer(osmUrl, {
 	        maxZoom: 18,
 	        attribution: osmAttrib
 	    });
 	    var map = L.map('map').setView([0, 0], 2).addLayer(osm);
 	    marker= L.marker(map.getCenter()).addTo(map)//.bindPopup("<b>Actual Position</b>").openPopup();
 	    
    loc = app.CreateLocator( "GPS,Network" );
	loc.SetOnChange( loc_OnChange ); 
	loc.SetRate( 0.2 ); //10 seconds.
	loc.Start();

    sns = app.CreateSensor( "Accelerometer" );
    sns.SetOnChange( sns_OnChange );
    sns.Start();
    
    }
    
    //Called when we get a change in location.
    var $jq = jQuery.noConflict();
function loc_OnChange( data )
{

	$jq('#field_GPS').text( data.provider);
	$jq('#field_GPS').append("<br>Lat "+data.latitude+", Lng "+data.longitude 
		+", Alt "+data.altitude);
	$jq('#field_GPS').append("<br>Spd "+data.speed+", Bear "+data.bearing
		+", Accu "+data.accuracy);
		

 	marker.setLatLng([data.latitude, data.longitude ]).update();
 	$jq('#map').panTo(marker.getLatLng, 8, {animation: true});
 //	map.panTo([50, 30]);
 	//$('#map').fitBounds(marker.getBounds());
}

function sns_OnChange( x, y, z, time )
{
    $jq('#field_ACC').text( "x="+x + "\n y="+y + "\n z="+z );
}


</script>

<html>
<head>
    <meta name="viewport" content="width=device-width">
    <script src='file:///android_asset/app.js'></script>
    
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
	
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.3.js'></script>
    <script type='text/javascript' src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    
 
	//<script type="text/javascript" src="http://gc.kis.scr.kaspersky-labs.com/1B74BD89-2A22-4B93-B451-1C9E1052A0EC/main.js" charset="UTF-8"></script>
    //<script src="/vendor/leaflet/addons/leaflet.markercluster.js"></script>
    //<script src="/vendor/leaflet/addons/leaflet.hash.js"></script>
    //<script src="/vendor/leaflet/addons/leaflet.makimarkers.js"></script>
    //<script src="/vendor/leaflet/addons/leaflet.listmarkers.min.js"></script>
    //<link rel="stylesheet" href="/vendor/leaflet/addons/css/leaflet.markercluster.css" />
</head>
	
<style>
	body { background-color: #ffffff; }
    .hello 
    { 
        font-size: 42; 
        width: 100%;
        margin-top: 2em;
        text-align: center;
        color: blue;
    }
    
    #map {
			width: 100%;
			height: 400px;
		}
</style>

<body onload="app.Start()">

	<div data-role="page">

	<div data-role="header">
		<h1 style="text-align:center;">Traking Sensor</h1>
	</div><!-- /header -->

	<div role="main" class="ui-content">
		<div id="field_GPS">GPS GOES HERE</div>
		<div id="field_ACC" style="color:#0000FF">ACCELEROMETER GOES HERE</div>
		<div id='map'></div>
	</div><!-- /content -->

	<div data-role="footer" data-position="fixed">
		<h4 style="text-align:center;">Ing. Marco Salvatori</h4>
	</div><!-- /footer -->
</div><!-- /page -->
	


</body>
</html>

最佳答案

panTo 是 Leaflet map 实例上的一个方法，但您将其用作 jQuery 方法 - $jq('#map').panTo。您应该只使用 map.panTo。

请参阅http://leafletjs.com/reference-1.0.3.html#map-panto有关此方法和其他 Leaflet 方法的完整文档。

关于javascript - jquerymobile 和 leaflet 方法不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42612178/

27

4

0

文章推荐： image - Flutter-编解码器对象中的图像对象

文章推荐： azure - 如何在Azure上的多个节点上运行相同的角色？

文章推荐： gradle - DRY，是否有更好的gradle依赖声明？

文章推荐： azure - Visual Studio 团队服务构建

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

javascript - jquerymobile 和 leaflet 方法不起作用