0

我有一个使用 jQuery Mobile 的网站，其中一个页面显示了一张使用 Cloudmade 的 Leaflet 的地图。

此页面加载并显示带有标记的地图，这一切都很好，但是......

我有另一个页面，其中包含指向地图页面的链接，然后加载正常，除了它似乎试图从错误的位置获取标记图像文件。

谁能告诉我更多关于该页面上出了什么问题？

这是我所知道的。jQuery Mobile 会重写普通的 A HREF 链接来代替目标页面的 ajax 动态加载。这对我来说是神秘而深不可测的，但像我这样的开发人员大多不需要关心它，对吧？但是，在这种情况下，传单调用代码的某些内容无法在修改中幸存下来。

Failed to load resource: the server responded with a status of 404 (Not Found)
http://placr.mobi/dist/images/marker.png

...是 safari 报告的错误。的确，这条路是不正确的。我设置了传单，将“dist”目录的内容放在一个名为“传单”的目录中。应该管用？事实上，它确实在 jQuery 修改之后起作用。

稍作调查，我发现传单源代码中没有提到“dist”（正如我所期望的那样。我应该可以肯定地调用该目录？）但是参考确实被编译成丑陋的javascript（' return"../../dist/"' )

也许有人有一个 jQuery Mobile 和传单一起工作的例子（理想情况下包括标记图像）

4

1 回答 1

1

问题是leaflet.js 根据html 中脚本标签的src 属性评估ROOT_URL。但是您的第一页中缺少脚本标记。

在您的第一页 (http://placr.mobi/maplinktest) 中放入上述行：

<script src="/leaflet/leaflet.js" type="text/javascript"></script>

正好在：

<div data-role="content" >

第二种替代解决方案是在第二页中添加以下内容：

L.Icon = L.Icon.extend({
    iconUrl: <markerUrl>,
    shadowUrl: <shadowUrl>
});

使用第二种方式，您可以显式设置图像 URL。

第三种解决方案是在第一页的锚点中添加 rel="external"：

<a href="/map?lat=51.45289&amp;lon=-0.1003&amp;zoom=16" rel="external" class="ui-link">Link to map page</a>
于 2012-08-22T23:52:08.780 回答