大家好
想了解一下關於GOOGLE MAP API要如何讀取資料庫中的數據後，並將該數據做為地圖標記內容顯示於地圖上呢~?
目前只有PHP與MySQL的相關知識，但不清楚要如何將資料整理給GOOGLE API來使用。
程式碼敘述大約如下:
1.先假定PHP部分由資料庫取得座標內容，分別放入陣列la與lo中。
2.然後宣告var features 存入JSON格式。
3.再將資料顯示於地圖標記上。
問題如下
Q:請問要如何將不確定數量的標記宣告成var featurse呢?因為目前只知道固定數量的宣告方法，但不清楚如果輸出標記可能只有1個或者可能會持續增加的情況該如何宣告呢?
謝謝各位
<?php
$la[] = 23.653713;
$lo[] = 120.615168;
$la[] = 23.657115;
$lo[] = 120.615102;
?>
<html>
<head>
<meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
<meta charset='utf-8'>
<title>CAR MAP</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#map {
height: 100%;
width: 100%;
}
#legend {
font-family: %u5FAE%u8EDF%u6B63%u9ED1%u9AD4,Arial Unicode MS;
font-size: 15px;
background: #fff;
padding: 10px;
margin: 30px;
border: 3px solid #000;
}
#legend h3 {
margin-top: 0;
}
#legend img {
vertical-align: middle;
}
</style>
</head>
<body>
<div id='map'></div>
<div id='legend'><h3>圖形說明</h3></div>
<script>
function initMap()
{
map = new google.maps.Map(document.getElementById('map'), {zoom: 20,mapTypeControl:true,center: new google.maps.LatLng(23.555444,120.605087),mapTypeId: 'hybrid'});
var iconBase = 'images/';
var icons = {
V1_6: {name: 'pic1',icon: iconBase + 'V1-6.png'},
V1_5: {name: 'pic2',icon: iconBase + 'V1-5.png'},
V1_3: {name: 'pic3',icon: iconBase + 'V1-3.png'},
V1_1: {name: 'pic4',icon: iconBase + 'V1-1.png'}
};
var features = [
{
position: new google.maps.LatLng(<?php echo $la[0] ?>,<?php echo $lo[0] ?>),type: 'V1_3',label: 1',
contentString: '<h1 id=firstHeading class=firstHeading>裝置編號：1</h1>資料1：25.48</p>資料2：28</p>資料3：1.229</p>資料4：0.044</p>'
},{
position: new google.maps.LatLng(<?php echo $la[1] ?>,<?php echo $lo[1] ?>),type: 'V1_3',label: '2',
contentString: '<h1 id=firstHeading class=firstHeading>裝置編號：2</h1>資料1：25.48</p>資料2：28</p>資料3：1.229</p>資料4：0.044</p>'
}];
function addMarker(feature)
{
var marker = new google.maps.Marker({position: feature.position,icon: icons[feature.type].icon,label: feature.label,map: map,zIndex:2});
var infowindow = new google.maps.InfoWindow({content: feature.contentString});
marker.addListener('click', function(){infowindow.open(map, marker);});
}
function addMark()
{
var marker = new google.maps.Marker({position: new google.maps.LatLng(23.555444,120.605087),icon: 'images/djj20.png',map: map,zIndex:1});
}
addMark();
for (var i = 0, feature; feature = features[i]; i++)
{
addMarker(feature);
}
var legend = document.getElementById('legend');
for (var key in icons)
{
var type = icons[key];
var name = type.name;
var icon = type.icon;
var div = document.createElement('div');
div.innerHTML = '<img src=' + icon + '> ' + name;
legend.appendChild(div);
}
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}
</script>
<script async defer
src='https://maps.googleapis.com/maps/api/js?key=AIzaSyAyzW4MnomE-X9ssZ-_xrPG8b_wwhJr544&callback=initMap'>
</script>
</body>
</html>
已邀請的邦友 {{ invite_list.length }}/5
試試看
把原先的
var features = [
{
position: new google.maps.LatLng(<?php echo $la[0] ?>,<?php echo $lo[0] ?>),type: 'V1_3',label: 1',
contentString: '<h1 id=firstHeading class=firstHeading>裝置編號：1</h1>資料1：25.48</p>資料2：28</p>資料3：1.229</p>資料4：0.044</p>'
},{
position: new google.maps.LatLng(<?php echo $la[1] ?>,<?php echo $lo[1] ?>),type: 'V1_3',label: '2',
contentString: '<h1 id=firstHeading class=firstHeading>裝置編號：2</h1>資料1：25.48</p>資料2：28</p>資料3：1.229</p>資料4：0.044</p>'
}];
改成
var features = [
<?php
foreach ($locations as $location) {
echo "{";
echo "position: new google.maps.LatLng(".$location["la"].",".$location["lo"]."),type: 'V1_3',label: 1',";
echo "contentString: '<h1 id=firstHeading class=firstHeading>裝置編號：1</h1>資料1：25.48</p>資料2：28</p>資料3：1.229</p>資料4：0.044</p>'
},";
}
?>
];
試試看
而 $locations 的宣告方式改成如下
$locations = array (
array("la"=>25.111,"lo"=>123.333),
array("la"=>25.222,"lo"=>123.444)
);
iThome鐵人賽
看影片追技術