iT邦幫忙

0

關於GOOGLE MAP API 與 PHP MySQL的相關問題

  • 分享至 

  • xImage

大家好
想了解一下關於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>
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

4
海綿寶寶
iT邦大神 1 級 ‧ 2020-10-25 17:00:23
最佳解答

試試看
把原先的

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)
    );
tuogjlbm iT邦新手 5 級 ‧ 2020-10-25 17:06:09 檢舉

謝謝大神回應~
我馬上試試看!

tuogjlbm iT邦新手 5 級 ‧ 2020-10-25 17:39:24 檢舉

謝謝大神的幫忙!
測試後已經成功了,接下來大約知道如何進行了!

/images/emoticon/emoticon13.gif

我要發表回答

立即登入回答