如何将PHP查询的酒店数据转为Google Maps Infobox所需的JS格式

PHP侧数据处理 #

先将你从数据库查询得到的酒店数组整理为前端需要的结构，再转成JSON格式：

<?php
// 你的现有查询结果数组
$array_hotel = array();
// ... 你原有的数据库查询赋值逻辑 ...

$format_hotels = [];
foreach ($array_hotel as $idx => $hotel) {
    $format_hotels[] = [
        // 可根据实际业务修改详情页地址，比如拼接酒店ID生成动态路径
        'detail_url' => 'listing-single.html',
        'img' => $hotel['image'],
        'name' => $hotel['hotelname'],
        'address' => $hotel['address'],
        'price' => '$ ' . $hotel['amount'],
        'star_rating' => $hotel['rate'],
        'lat' => $hotel['latitude'],
        'lng' => $hotel['longitude'],
        'sort' => $idx
    ];
}
// 转JSON时加参数避免引号冲突
$hotel_json = json_encode($format_hotels, JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE);
?>

前端JS生成目标数组 #

分两种场景处理：

场景1：JS代码写在PHP页面中 #

直接将PHP输出的JSON赋值给JS变量，遍历生成locations数组：

// 接收PHP输出的酒店数据
const hotelList = <?php echo $hotel_json; ?>;
const imagepath = $('#img_path').val();
// 此处替换为你实际的markerIcon定义
const markerIcon = '你的标记图标路径';

function locationData(locationURL, locationImg, locationTitle, locationAddress, locationPrice, locationStarRating) {
    return ('<div class="map-popup-wrap"><div class="map-popup"><div class="infoBox-close"><i class="far fa-times"></i></div><a href="' + locationURL + '" class="listing-img-content fl-wrap"><img src="' + locationImg + '" alt=""><span class="map-popup-location-price"><strong>Awg/Night</strong>' + locationPrice + '</span></a> <div class="listing-content fl-wrap"><div class="card-popup-raining map-card-rainting" data-staRrating="' + locationStarRating + '"></div><div class="listing-title fl-wrap"><h4><a href=' + locationURL + '>' + locationTitle + '</a></h4><span class="map-popup-location-info"><i class="fas fa-map-marker-alt"></i>' + locationAddress + '</span></div></div></div></div>')
}

// 生成符合要求的locations数组
const locations = hotelList.map(hotel => {
    // 如果你的图片需要拼接前端imagepath，把hotel.img改成 imagepath + hotel.img 即可
    return [
        locationData(hotel.detail_url, hotel.img, hotel.name, hotel.address, hotel.price, hotel.star_rating),
        parseFloat(hotel.lat),
        parseFloat(hotel.lng),
        hotel.sort,
        markerIcon
    ]
})

场景2：JS代码为独立的外部文件 #

先在HTML页面中添加隐藏域存储JSON数据：

<input type="hidden" id="hotel_data" value='<?php echo $hotel_json; ?>'>

再在JS文件中读取隐藏域的值解析后使用：

const hotelList = JSON.parse($('#hotel_data').val());
// 后续生成locations数组的逻辑和场景1完全一致

注意事项 #

• 若需要动态生成酒店详情页地址，可在PHP遍历阶段根据酒店的唯一ID拼接，比如'detail_url' => 'listing-single.html?hotel_id=' . $hotel['id']
• 价格的单位、符号可根据业务需求自行调整格式
• 经纬度在前端做parseFloat转换，避免地图插件识别字符串类型出错

内容的提问来源于stack exchange，提问作者Franco Ramonda