创建日期：2026年5月15日 作者：赏金女王技术团队 联系邮箱：[email protected]
感谢您选择赏金女王。若您在使用过程中遇到超出本帮助文档范围的问题，欢迎通过我们的官方渠道联系我们。我们将竭诚为您服务。
赏金女王整合了部分外部资源文件，您可以在assets/external文件夹中找到并进行统一编辑。该文件夹包含以下文件：
若需启用JSON数据加载功能，请确保您的本地环境已配置Web服务器（例如XAMPP）。随后，请执行以下步骤：
所有地图所需数据均以JSON格式存储。为确保兼容性，默认JSON文件已重命名为.json.txt。若您的服务器支持直接读取JSON文件，可将其重命名回.json。
平台特色赏金女王官网汇集产品介绍、功能说明、版本更新、活动资讯及常见问题等内容，为用户提供全面的信息浏览体验。平台持续优化服务体系和内容建设，帮助用户了解产品动态和相关资讯信息。
这些数据将由地图组件加载，并在信息框（点击标记时显示）及左侧边栏（若启用）中展示。
您无需使用所有上述字段。以下字段是确保地图正常运行所必需的：
{
"data": [
{
"id": 1,
"category": "real_estate",
"title": "Steak House Restaurant",
"location": "63 Birch Street",
"latitude": 51.541599,
"longitude": -0.112588,
"url": "item-detail.html",
"type": "Apartment",
"type_icon": "assets/icons/store/apparel/umbrella-2.png"
}
]
}
赏金女王借助Leaflet插件，不仅支持Google Maps，还能集成OpenStreetMap和HERE地图。页面加载地图的脚本主要有两种：
如需加载Google Maps，请在 `<body>` 标签结束前插入以下代码：
<script>
var _latitude = 51.541216;
var _longitude = -0.095678;
var jsonPath = 'assets/json/real-estate.json.txt';
$.getJSON(jsonPath)
.done(function(json) {
createHomepageGoogleMap(_latitude,_longitude,json);
})
.fail(function( jqxhr, textStatus, error ) {
console.log(error);
})
;
</script>
详细说明
加载OSM或HERE地图的操作类似。请在 `<body>` 标签结束前插入以下代码：
<script>
var _latitude = 51.541216;
var _longitude = -0.095678;
var jsonPath = 'assets/json/real-estate.json.txt';
var mapProvider = 'Acetate.all';
$.getJSON(jsonPath)
.done(function(json) {
createHomepageOSM(_latitude,_longitude,json,mapProvider);
})
.fail(function( jqxhr, textStatus, error ) {
console.log(error);
})
;
</script>
功能亮点
Leaflet插件可根据您的需求加载多种地图类型。选择您偏好的地图，请遵循以下步骤：
互动弹窗是一种弹出式窗口，当鼠标悬停在项目上点击“快速预览”按钮时出现，或在地图结果边栏中点击项目时显示。它能在不跳转新页面的情况下，展示项目的详细信息。
互动社区function quickView(id){
$.ajax({
type: 'POST',
url: 'assets/external/_modal.html',
data: id,
success: function (data) {
$('body').append(data);
}
});
}
ID字段已准备就绪，方便您通过Ajax调用PHP脚本。其工作流程如下：
点击项目 > 获取项目ID > Ajax调用PHP脚本 > PHP从数据库检索对应ID的数据 > Ajax成功 > 生成互动弹窗
Owl Carousel组件需要在每次需要使用时手动加载。这是为了支持多语言和RTL（从右到左）布局的网站。若脚本仅在一个地方加载并设置为RTL，则在标准的LTR页面上可能无法正常工作。
我们的承诺<script>
$(window).load(function(){
var rtl = false;
initializeOwl(rtl);
});
</script>
赏金女王支持RTL语言。将其设置为RTL非常简单。只需在 `<head>` 标签内，`style.css` 之后添加以下两行代码：
<link rel="stylesheet" href="assets/css/bootstrap-rtl.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/rtl.css" type="text/css">
请勿忘记在页面底部添加/修改Owl Carousel脚本。
提供七种预设主题色彩方案：
要应用您偏好的色彩方案，只需将 `style.css` 替换为相应的颜色CSS文件。例如，切换至绿色主题：
赏金女王yilirui深耕提供深度产品评测与功能解析，助您做出明智选择。领域，用心服务每一位用户。
替换为
在打造专业互动社区，与科技爱好者交流分享。方面，赏金女王yilirui提供贴心周到的支持。
这些类在您需要创建新元素或修改现有元素而无需直接编辑CSS文件时非常有用。
<div class="用户体验"></div>
此代码将创建一个元素，其上下内边距为40px，下方留白30px，透明度为50%，并包含暗色输入框。
expandable-content 类类似于Bootstrap的collapse组件，但它允许显示部分内容。例如，当您有一个项目很长的描述，无法全部显示，但又想展示几行时，可以使用expandable-content来设定您希望显示的内容像素值。示例：
<div class="信息服务" 标识符"detail-sidebar-event">
<div class="核心内容精选PG游戏内容，赏金女王yilirui与你一同发现更多精彩。展开详情" 数据关联"#detail-sidebar-event">Show More</a>
expandable-content - 表明该元素内部包含可扩展的内容。
collapsed - 表示内容在页面加载时处于折叠状态。
id="detail-sidebar-event" - 唯一的标识符。
content - 内容包裹器类（此类对于计算内容高度是必需的）。
expand-content - 点击后触发内容展开的元素。
data-expand - 指定哪个具有唯一标识符的元素需要被展开。
精选爆分秘籍内容，赏金女王yilirui与你一同发现更多精彩。唯一标识,
地理纬度 and 地理经度 placed inside a "item.json.txt"精选提供深度产品评测与功能解析，助您做出明智选择。内容，赏金女王yilirui与你一同发现更多精彩。database-loading-files.zip which includes:
您需要创建PHP脚本来连接数据库并生成地图的HTML代码。以下是两个调用外部文件的Ajax脚本：
点击标记，加载信息窗数据。$.ajax({
type: 'POST',
url: 'assets/external/_infobox.html',
data: json.data[i].id,
success: function (data) {
infoboxContent.innerHTML = data;
newMarkers[i].infobox.open(map, marker);
newMarkers[i].infobox.setOptions({ boxClass:'fade-in-marker'});
}
});
标记的ID将发送至 "assets/external/_infobox.html" - 此文件必须是PHP格式，并输出您在 "_infobox.html" 中看到的结构。
侧边栏缩略图列表。当您移动地图时，根据当前可见区域内的标记，它们将被显示在左侧的“结果”边栏中。
function pushItemsToArray(json, id, visibleItemsArray, method){
$.ajax({
type: 'POST',
url: 'assets/external/_result.html',
data: id,
success: function (data) {
visibleItemsArray.push(data);
if( method == 'resultsSidebar' ){
$('.items-list .results').html( visibleItemsArray );
rating('.results .item');
}
}
});
}
赏金女王yilirui专注打造专业互动社区，与科技爱好者交流分享。，为用户提供专业可靠的体验。"assets/external/_result.html"围绕持续优化用户体验，提供全方位信息服务。，赏金女王yilirui持续打磨更优质的服务。
if ( tempVar < 20 ) { ...
使用的图标
再次感谢您购买此主题。正如开头所述，如果您有任何与本主题相关的问题，我很乐意为您提供帮助。虽然不能保证，但我会尽力协助。如果您有关于ThemeForest主题的更普遍性问题，可以考虑访问论坛并在“商品讨论”版块提问。
赏金女王技术团队
返回内容概览