CodeIgniter结合Google Maps实现点击项目缩放展示地块多边形功能

1. 修改控制器代码 #

首先需要把项目列表数据从控制器传递到视图，修改Site.php的index方法：

public function index(){
    // 获取所有项目数据传入视图
    $data['projects'] = $this->common_model->GetAllData('properties' , '' , 'id' , 'desc');
    $this->load->view('site/index', $data);
}

2. 调整视图HTML结构 #

在原有body内容基础上新增项目列表和详情展示区域，调整布局避免和地图错位：

<!-- 新增项目列表与详情区 -->
<div style="width: 300px; float: left; margin-right: 20px;">
  <h4>项目列表</h4>
  <ul id="project-list" style="list-style: none; padding: 0;">
    <?php foreach ($projects as $p): ?>
    <li class="project-item" data-project-id="<?= $p['id'] ?>" style="cursor: pointer; padding: 8px; border-bottom: 1px solid #eee;">
      <?= $p['Project name'] ?>
    </li>
    <?php endforeach; ?>
  </ul>
  <div id="project-detail" style="margin-top: 20px; padding: 10px; border: 1px solid #ccc;">
    <h5>项目详情</h5>
    <p id="detail-content">请点击左侧项目查看详情</p>
  </div>
</div>
<!-- 原有地图容器添加浮动适配布局 -->
<div id="map-container" style="float: left;"><div id="map"></div></div>
<div style="clear: both;"></div>

3. 调整JS逻辑实现定位功能 #

3.1 声明全局存储对象 #

在initialize函数外先声明全局变量，用来存储地图实例和每个项目对应的多边形、边界、详情数据：

// 全局存储项目映射表
var projectDataMap = {};
// 全局存储地图实例方便调用
var globalMap;

3.2 修改初始化逻辑存储项目数据 #

在initialize函数中，先把地图实例赋值给全局变量：

var map = new google.maps.Map(document.getElementById("map"), {
  zoom: 3,
  center: center,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
});
// 新增这行赋值全局地图实例
globalMap = map;

在循环生成每个项目多边形的代码后，新增边界计算和数据存储逻辑：

const bermudaTriangle<?=  $row["id"] ?> = new google.maps.Polygon({
paths: data,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
});
bermudaTriangle<?=  $row["id"] ?>.setMap(map);

// ====== 以下为新增代码 ======
// 计算当前项目多边形的边界范围
var bounds = new google.maps.LatLngBounds();
data.forEach(function(point) {
  bounds.extend(new google.maps.LatLng(point.lat, point.lng));
});
// 把项目数据存入全局映射表
projectDataMap[<?= $row['id'] ?>] = {
  polygon: bermudaTriangle<?= $row["id"] ?>,
  bounds: bounds,
  name: '<?= addslashes($row["Project name"]) ?>',
  description: '<?= addslashes($row["description"]) ?>'
};
// ====== 新增代码结束 ======

3.3 绑定项目点击事件 #

在所有JS代码末尾新增点击事件逻辑：

document.addEventListener('DOMContentLoaded', function() {
  // 绑定所有项目列表项的点击事件
  document.querySelectorAll('.project-item').forEach(function(item) {
    item.addEventListener('click', function() {
      var projectId = this.getAttribute('data-project-id');
      var targetProject = projectDataMap[projectId];
      if (!targetProject) return;

      // 1. 地图自动缩放定位到当前项目多边形范围
      globalMap.fitBounds(targetProject.bounds);

      // 2. 高亮选中的多边形（可选效果）
      for (var id in projectDataMap) {
        projectDataMap[id].polygon.setOptions({
          fillColor: "#FF0000",
          strokeColor: "#FF0000"
        });
      }
      targetProject.polygon.setOptions({
        fillColor: "#00FF00",
        strokeColor: "#00FF00"
      });

      // 3. 展示项目详情
      document.getElementById('detail-content').innerHTML = `
        <strong>项目名称：</strong>${targetProject.name}<br>
        <strong>项目描述：</strong>${targetProject.description}
      `;
    });
  });
});

注意事项 #

• 代码中的字段名需要和你实际数据库的字段保持一致，如果项目表的名称、描述字段名不同需要对应修改
• 用addslashes处理字符串字段是为了避免特殊字符导致JS语法错误
• 如果需要实现点击多边形也展示详情的效果，只需要给每个polygon实例添加click事件，复用上述点击逻辑即可

内容的提问来源于stack exchange，提问作者Hakimuddin Saifee