使用谷歌地图位置API中心地图

时间:2015-02-17 09:16:47

标签: javascript php google-maps

我编写了一个网站(基于html,css),可以在指定的地方搜索医生(此时从数据库/ SQL)。 我还想要一张地图,向用户展示他周围的医生。

所以我做了一些GoogleMaps-Places-API和其他API的实验,但我的编程技巧很难做到这一点/了解该怎么做!

我需要一张可以发现用户并以他为中心的地图 - 并在他的位置设置一个标记。在用户定义了搜索区域后,地图应切换到此位置并显示所有医生(可能由医生主体过滤)。

最好的方法是使用我的PHP输入字段(用于数据库请求)并将其与地图连接?

第一个脚本是我的实验图。它居中但不会在用户周围设置任何位置标记。

第二个脚本是我的php请求,用于与sql数据库通信。



<script>
var map;
var stepDisplay;
var service;


function initialize(coords) {
	var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
	var myOptions = {
		zoom: 8,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
};

							
	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	var marker = new google.maps.Marker({
		position: latlng,
		map: map,
		title: "Hier bist du :)"
});
}

	navigator.geolocation.getCurrentPosition(function(position){
	initialize(position.coords);
}, 
	function(){
	document.getElementById('map_canvas').innerHTML = 'Deine Position konnte leider nicht ermittelt werden';
	});


google.maps.event.addDomListener(window, 'load', initialize);
</script>
&#13;
&#13;
&#13;

&#13;
&#13;
<?php
			
			//Datenbank einbinden
			include("config.inc.php");
			
			if (logged_in()) header('Location: http://localhost/n_a_h.php');
			
			$con = mysqli_connect(host,user,pass) or die ("Fehler beim Verbinden mit der Datenbank!");
			mysqli_select_db($con, database) or die ("Fehler beim &Ouml;ffnen der Datenbank");
			
			echo "<form action = '' target='_self' method = 'post' name='fachr' target'_self'>";
			
				//Auswahl Fachrichtung
				echo "Fachrichtung: ";
				echo "<select name='ps_fachrichtung'>";
				echo "<option value=''>Bitte w&auml;hlen...</option>";
						
				$sql_fr = "select fachrichtung from t_fachrichtung";
				$res_fr=mysqli_query($con, $sql_fr);
						
				while ($dsatz_fr = mysqli_fetch_array($res_fr))
				{
					echo "<option>".$dsatz_fr["fachrichtung"]."</option>";
				}
				echo "</select>";
					
				//Auswahl PLZ Ort
				echo "PLZ / Ort: ";
				echo "<id='ps_plz_ort'><input name='ps_plz_ort' />";
				
				echo "<input type = 'submit' name = 'ps_senden' value='Best&auml;tigen' size ='20' />";

			echo "</form>";
			
			//ablauf der Suche
			if (isset($_POST['ps_senden']))
			{
				//Ausgewählten Fachbereich anzeigen
				$ps_fr = $_POST["ps_fachrichtung"];
				$ps_plz_ort = $_POST["ps_plz_ort"];
				preg_match("(\d+)",$ps_plz_ort,$ps_plz);
				$ps_ort=explode(" ", $ps_plz_ort);
				$lg=count($ps_ort);
				
				
				$ps_plz_kon="no";
				for ($i=0; $i<$lg; $i++)
				{
					if (is_numeric($ps_ort[$i]))
					{
						//$ps_plz[0]=$ps_ort[$i];
						if ($i==0) $k=1;
						else $k=2;
						$ps_plz_kon="yes";
						break;
					}
				}
				$ps_ort[0]=implode(" ",$ps_ort);
				//echo "$k<br />";
				//echo "$ps_plz_kon<br />";
				if ($ps_plz_kon=="yes")
				{
					if ($k==1)	$ps_ort[0]=substr($ps_ort[0],6);
					else		$ps_ort[0]=substr($ps_ort[0],0,-6);
				}
				//echo "<br />";
				//echo $ps_plz_ort;
				//echo "<br />";
				//echo $ps_plz[0];
				//echo "<br />";
				//echo $ps_ort[0];
				echo "<br />"; 
				echo "Fachbereich: ";
				echo "$ps_fr<br />";
				
				//Ärzte suchen und anzeigen
				if ($ps_plz_kon=="no") 	
				{
					$sql_erg = "select * from t_arzt where A_Fachrichtung = '$ps_fr' AND A_Ort = '$ps_ort[0]'";
				}
				else				
				{
					if ($ps_ort[0]=="")	$sql_erg = "select * from t_arzt where A_Fachrichtung = '$ps_fr' AND A_PLZ = '$ps_plz[0]'";
					else				$sql_erg = "select * from t_arzt where A_Fachrichtung = '$ps_fr' AND (A_Ort = '$ps_ort[0]' OR A_PLZ = '$ps_plz[0]')";
				}
				$res_erg = mysqli_query($con, $sql_erg);
				$num_erg = mysqli_num_rows($res_erg);
				
				switch($num_erg)
				{
					case ($num_erg == 0):
						echo "Es wurden keine &Auml;rzte in Ihrer N&auml;he gefunden.<br />";
						break;
					case ($num_erg == 1):
						echo "Es wurde ".$num_erg."  Arzt in Ihrer Umgebung gefunden.<br />";
						break;
					case ($num_erg >= 2):
						echo "Es wurden ".$num_erg."  &Auml;rzte in Ihrer Umgebung gefunden.<br />";
				}
				//if ($num_erg==0) echo "Es wurden keine &Auml;rzte in Ihrer N&auml;he gefunden.<br />";
				//else echo "Es wurde(n) ".$num_erg."  &Auml;rzt(e) in Ihrer Umgebung gefunden.<br />";
				
				if ($num_erg > 0)
				{
					echo "<br/>";
					echo "<table border width='50 %'>";
						echo "<tr align='center'>";
							echo "<td><b>Praxis</b></td>";
							echo  "<td><b>Adresse</b></td>";
							echo "<td><b>Wartezeit</b></td>";
						echo"</tr>";
						while ($dsatz_erg = mysqli_fetch_assoc($res_erg))
						{
							//echo $dsatz_erg["A_Titel"]." ".$dsatz_erg["A_Nachname"].", ".$dsatz_erg["A_Vorname"].", ".$dsatz_erg["A_Strasse"]." ".$dsatz_erg["A_Hausnr"].", ".$dsatz_erg["A_PLZ"]." ".$dsatz_erg["A_Ort"]. "<br />";
							echo "<tr>";
								echo "<td>" .$dsatz_erg["A_Titel"]." ".$dsatz_erg["A_Nachname"].", ".$dsatz_erg["A_Vorname"]. "</td>";
								echo "<td>" .$dsatz_erg["A_Strasse"]." ".$dsatz_erg["A_Hausnr"].", ".$dsatz_erg["A_PLZ"]." ".$dsatz_erg["A_Ort"]. "</td>";
								echo "<td>" .$dsatz_erg["A_Wartezeit"]." min</td>";
							echo "</tr>";
						}
					echo "</table>";
				}
			}
		?>
		
        <!-- <p class="Text">Praxis Suchen</p> -->
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

如果您使用PHP(或任何其他服务器端编程语言)或jQuery或JSON文档将标记提供给您的标记数组,则更为重要

试试这个片段(我已经测试过了):

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&"></script>
<script type="text/javascript">
var mapObj;

function initialize() {

    var myOptions = {
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

    var mapObj = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var bounds = new google.maps.LatLngBounds();

    // Try HTML5 geolocation
    if(navigator.geolocation) 
    {
        navigator.geolocation.getCurrentPosition(function(position) 
        {
            var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var infowindow = new google.maps.InfoWindow({
                                    map: mapObj,
                                    position: pos,
                                    content: 'Deine Position'
                                });
            mapObj.setCenter(pos);
        }, function() 
        {
            var options = {
                           map: mapObj,
                           position: new google.maps.LatLng(60, 105),
                           content: content
                        };
            var infowindow = new google.maps.InfoWindow(options);
            mapObj.setCenter(options.position);

        });
    } else {
        // Browser doesn't support Geolocation
    }

    var infowindow  = new google.maps.InfoWindow();
    var markers = []; //array to hold markers
    // Multiple Markers
    markers.push(['London Eye, London', 51.503454, -0.119562]);
    markers.push(['Palace of Westminster, London', 51.499633, -0.124755]);

    // Loop through your array of markers and add them to mapObj  
    for (i = 0; i < markers.length; i++) 
    {
        //create a latitude / longitude object first:
        var pointLatLng = new google.maps.LatLng(markers[i][1],markers[i][2]);  

        //extend map to include new marker
        bounds.extend(pointLatLng);

        //create the marker object:
        markerObj = new google.maps.Marker({
                            position: pointLatLng,
                            map: mapObj,
                            title: markers[i][0]
                        });

        google.maps.event.addListener(markerObj, 'click', (function(markerObj, i) {
                    return function() {
                        infowindow.setContent("info window: "+ markers[i][0]);
                        infowindow.open(mapObj, markerObj);
                    }
            })(markerObj, i));

        // center map fitting all markers on the screen
        mapObj.fitBounds(bounds);
        markerObj.setMap(mapObj);
    }
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

然后,您将使用数组来存储标记数据。希望这是有道理的。

请注意,如果您无法访问所需标记的纬度和经度,则还可以选择代码地址:     geocoder.geocode({'address':addressString}