我的目标是使用 google 地图和 codingniter 在多边形上创建一个集群

Question

我想做的是从数据库中提取纬度和经度值并将它们显示在带有多边形线的google地图上

已成功创建多边形线，但我希望在单击数据库中的特定项目时显示带有缩放的多边形线

这是我的项目table

ID
Project name
lat
lng
description

这是我的地块坐标table

ID
project_id
lat
lng

我想将我的项目放在地图上，这样当有人点击该项目时，他们会看到地块及其细节

我已经尝试过的代码是 https://www.webwiders.in/WEB01/cluster/

这是我的控制器

<?php
defined('BASEPATH') OR exit('No direct script access allowed');


class Site extends CI_Controller {
  public function __construct() {
    parent::__construct();
    $this->db->query("set sql_mode = ''");
        
  }
    
    
    public function index(){
        

        $this->load->view('site/index');
    }
?>

这是我的看法

<!DOCTYPE >
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>MarkerClustererPlus V3 Example</title>

    <style type="text/css">
      body {
        margin: 0;
        padding: 10px 20px 20px;
        font-family: Arial;
        font-size: 16px;
      }

      #map-container {
        padding: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc #ccc #999 #ccc;
        -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
        width: 600px;
      }

      #map {
        width: 600px;
        height: 400px;
      }
    </style>

     <script src="https://maps.googleapis.com/maps/api/js? 
    key=yourkey"></script>
    <script type="text/javascript" src="<?= base_url() ?>assets/js/data.js"></script>
    <script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>

    <script type="text/javascript">
      <?php $properties = $this->common_model->GetAllData('properties' , '' , 'id' , 'desc');

       ?>
      function initialize() {

        var center = new google.maps.LatLng(28.079872, 78.357087);

        var map = new google.maps.Map(document.getElementById("map"), {
          zoom: 3,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
        });


        var markers = [];
        <?php foreach ($properties as $row) 
        {
          $lands = $this->common_model->GetAllData('land_marks' ,  array('p_id' => $row['id'] ), 
          'id' , 'desc');
          ?>
          var data = [];
          <?php
          foreach ($lands as $value) 
          { ?>

            var feed = {lat: <?=  $value["lat"] ?> , lng:<?=  $value["lng"] ?> };

            
            data.push(feed);
          
          var latLng = new google.maps.LatLng(
            '<?=  $value["lat"] ?>',
            '<?=  $value["lng"] ?>'
          );
          var marker = new google.maps.Marker({
            position: latLng,
          });
          markers.push(marker);      
    <?php }
    ?>
     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 markerCluster<?=  $row["id"] ?> = new MarkerClusterer(map, markers , {
    imagePath:
      "<?= base_url() ?>assets/images/m",
       
     });
    <?php
        }
    ?>
        
        
      }
      google.maps.event.addDomListener(window, "load", initialize);
    </script>
  </head>
  <body>
    <h3>A simple example of MarkerClustererPlus (100 markers)</h3>
    <div id="map-container"><div id="map"></div></div>
  </body>
</html>

Answer 1

在一个 table 命名属性中，列出了所有属性

id	name	lat	lng	created_at

此外，我在 table land_marks

中插入了属性地块 (lat ,lng)

id	p_id	part	lat	lng	created_at

    <!DOCTYPE >
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>MarkerClustererPlus V3 Example</title>

    <style type="text/css">
      body {
        margin: 0;
        padding: 10px 20px 20px;
        font-family: Arial;
        font-size: 16px;
      }

      #map-container {
        padding: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc #ccc #999 #ccc;
        -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
        width: 600px;
      }

      #map {
        width: 600px;
        height: 400px;
      }
    </style>

 <script src="https://maps.googleapis.com/maps/api/js?key=YOURKEY"></script>
    <script type="text/javascript" src="<?= base_url() ?>assets/js/data.js"></script>
    <script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>

    <script type="text/javascript">
      <?php $properties = $this->common_model->GetAllData('properties' , '' , 'id' , 'desc');

       ?>
      function initMap() {
        var center = new google.maps.LatLng(28.079872, 78.357087);
        const iconBase = "<?= base_url() ?>assets/images/";
   
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: center,
  });
  
  const labels = [ "Mhow" , "Indore" ];
  var locdata = [];
        <?php foreach ($properties as $row) 
        { ?>

            var locfeed = {lat: <?=  $row["lat"] ?> , lng:<?=  $row["lng"] ?> };
            locdata.push(locfeed);

        <?php  

          $parts = $this->common_model->GetAllData('land_marks' ,  array('p_id' => $row['id'] ), 'id' , 'desc' ,'' , '' ,'' ,'part' );
          for($i=0; $i < count($parts); $i++){
          $lands = $this->common_model->GetAllData('land_marks' ,  array('p_id' => $row['id'] , 'part' => $parts[$i]['part'] ,  ), 'id' , 'desc' );
          ?>
            var data<?= $i ?> = [];
        <?php
        foreach ($lands as $value) 
        {  ?>

          var feed = {lat: <?=  $value["lat"] ?> , lng:<?=  $value["lng"] ?> };
          data<?= $i ?>.push(feed);

      <?php } ?>  
        // Construct the polygon.
     
  const poly<?=  $i.$row["id"] ?> = new google.maps.Polygon({
    paths: data<?=  $i ?>,
    strokeColor: "#000",
    strokeOpacity: 0.3,
    strokeWeight: 2,
    fillColor: "#000",
    fillOpacity: 0.35,
  });
  poly<?=  $i.$row["id"] ?>.setMap(map);
  google.maps.event.addListener(poly<?=  $i.$row["id"] ?>, "mousemove", function(event) {
    this.setOptions({strokeWeight: 4.0 , strokeOpacity: 0.9 , fillOpacity: 0.5})
  });
  google.maps.event.addListener(poly<?=  $i.$row["id"] ?>, "mouseout", function(event) {
    this.setOptions({strokeWeight: 1.0 , strokeOpacity: 0.3 , fillOpacity: 0.35})
  });

     <?php } } ?>
     var markerData = [];
  const markers = locations.map((location, i) => {
    var marker =  new google.maps.Marker({
      position: location,
      icon : iconBase + 'location.png',
      label: {text : labels[i % labels.length], color: "white"},
    });
     google.maps.event.addListener(marker, 'click', function() {
    map.panTo(this.getPosition());
    map.setZoom(18);
  });

     return marker
  });
  /* Change markers on zoom */
google.maps.event.addListener(map, 'zoom_changed', function() {
    var zoom = map.getZoom();
    // iterate over markers and call setVisible
    for (i = 0; i < markers.length; i++) {
        markers[i].setVisible(zoom <= 15);
    }
});

  // Add a marker clusterer to manage the markers.
  new MarkerClusterer(map, markers, {
    imagePath:
      "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
  });
  
}
const locations = [
<?php foreach ($properties as $row): ?>
  { lat: <?= $row['lat'] ?>, lng: <?= $row['lng'] ?> },
<?php endforeach ?>

  
];


      google.maps.event.addDomListener(window, "load", initMap);
    </script>
  </head>
  <body>
    <h3>A simple example of MarkerClustererPlus (100 markers)</h3>
    <div id="map-container"><div id="map"></div></div>
  </body>
</html>

我的目标是使用 google 地图和 codingniter 在多边形上创建一个集群

My goal is to create a cluster on polygons using google maps and codingniter

maps

jquery

codeigniter

polyline