我想做的是，從資料庫中提取經緯度值，并在谷歌地圖上用多邊形線顯示它們
。多邊形線已經成功創建，但我想讓這個多邊形線在點擊資料庫中的特定專案時出現縮放
。這是我的專案表
ID
專案名稱
緯度
lng
描述
這是我的地塊坐標表
。ID
project_id
緯度
緯度
我想把我的專案放在地圖上，這樣當有人點擊專案時，他們就會看到土地和它的具體情況
。我已經嘗試的代碼是 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'）。
}
?>
這是我的觀點
<html>
<head>
<meta http-equiv="content-type" content="text/html。charset=utf-8" />
<title>MarkerClustererPlus V3 示例</title>
<style type="text/css"/span>>
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, 0.5) 0 2px 5px;
-moz-box-shadow: rgba（64, 64, 64, 0.5) 0 2px 5px。
box-shadow: rgba(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>/span>
<script type="text/javascript" src="< ? = base_url() ?>assets/js/data.js"></script>
<script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"/span>> </script>>
<script type="text/javascript">/span>
<? 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"/span>), {
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"/span>] ? > , 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"/span>] ? > = new google.maps.Polygon（{
paths: data,
strokeColor: "#FF0000"/span>,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000"/span>,
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>MarkerClustererPlus的一個簡單例子（100個標記）</h3>/span>
<div id="map-container">/span><。 div id="map">/span>< /div></div>
</body>
</html>
uj5u.com熱心網友回復：
在一個名為properties的表格中，列出了所有的屬性
。另外，我還在表 land_marks 中插入了屬性土地片（lat ,lng）
| id | p_id | part | latlngcreated_at |
|---|
<! DOCTYPE >
<html>>
<head>
<meta http-equiv="content-type" content="text/html。charset=utf-8" />
<title>MarkerClustererPlus V3 示例</title>
<style type="text/css"/span>>
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, 0.5) 0 2px 5px;
-moz-box-shadow: rgba（64, 64, 64, 0.5) 0 2px 5px。
box-shadow: rgba(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"/span>> </script>>
<script type="text/javascript">/span>
<? 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"/span>), {
zoom: 3,
center: center,
});
const labels = [ "Mhow" , "Indore" ] 。
var locdata = [];
<?php foreach ($properties as $row)
{ ?>
var locfeed = {lat: <?= $row["lat"/span>] ? > , 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"/span>] ? > , lng:<?=$value["lng"] ? > };
data<?=$i ?>.push（feed）。
<?php } ?>
//構建多邊形。
const poly<?=$i.$row["id"/span>] ? > = 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) => /span> {
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）。
});
returnmarker
});
/* 更改縮放時的標記 */
google.maps.event. addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom（）。
//遍歷標記并呼叫setVisible。
for (i = 0; i < markers.length; i ) {
markers[i].setVisible(zoom <=15)。
}
});
//加入一個標記群集器來管理標記。
new MarkerClusterer（map, markers, {
imagePath:
"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"/span>,
});
}
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>MarkerClustererPlus的一個簡單例子（100個標記）</h3>
<div id="map-container">/span>< div id="map">/span>< /div></div>
</body>
</html>/span>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/311022.html
標籤：
上一篇：動態內容上的js事件回圈