使用地理位置設置谷歌地圖中心

-1

我打算在地圖上顯示一個用戶當前位置的中心標記，並從顯示的mysql數據庫中提取標記。我可以讓我的地圖在指定時顯示特定的經緯度，但我無法獲取用戶的當前位置並使用它來修改地圖的中心。使用地理位置設置谷歌地圖中心

任何幫助，將不勝感激！

<!DOCTYPE html > 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>PHP/MySQL & Google Maps Example</title> 
<script src="markerclusterer.js" type="text/javascript"></script> 
    <script src="https://maps.googleapis.com/maps/api/js? key=" 
      type="text/javascript"></script> 

<script type="text/javascript"> 
    //<![CDATA[ 


function showLocation(position) { 
      var latitude = position.coords.latitude; 
      var longitude = position.coords.longitude; 
      alert("Latitude : " + latitude + " Longitude: " + longitude); 
     } 

     function errorHandler(err) { 
     if(err.code == 1) { 
      alert("Error: Access is denied!"); 
     } 

     else if(err.code == 2) { 
      alert("Error: Position is unavailable!"); 
     } 
    } 

     function getLocation(){ 

     if(navigator.geolocation){ 
      // timeout at 60000 milliseconds (60 seconds) 
      var options = {timeout:60000}; 
      navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options); 
     } 

     else{ 
      alert("Sorry, browser does not support geolocation!"); 
     } 
    } 


var customIcons = { 
    restaurant: { 
    icon: 'http://orthodontistsearch.com.au/data/documents/Icon.png', 
    }, 
    bar: { 
    icon: 'http://orthodontistsearch.com.au/data/documents/Icon.png', 
    } 
}; 

    function load() { 
     var cluster = []; 
     var map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng('latitude' , 'longitude'), 
     zoom: 4, 
     mapTypeId: 'roadmap' 
     }); 
var infowindow = new google.maps.InfoWindow(); 

    // Change this depending on the name of your PHP file 
    downloadUrl("phpsqlajax_genxml.php", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     var type = markers[i].getAttribute("type");   
     var icon = customIcons[type] || {}; 

     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: icon.icon, 
     shadow: icon.shadow 
     }); 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
     var name = markers[i].getAttribute("name"); 
     var address = markers[i].getAttribute("address"); 
     var type = markers[i].getAttribute("type"); 
     var phone = markers[i].getAttribute("phone"); 
     var url = markers[i].getAttribute("url"); 
     var html = name + "<br>" + "Address: " + address + "<br>" + "Phone Number: " + phone + "<br>" + " Website: " + url + "<br>" ; 
        infowindow.setContent(html); 
        infowindow.open(map, marker, html); 
        } 
       })(marker, i)); 
     cluster.push(marker); 
    } 
    var mc = new MarkerClusterer(map,cluster); 
    }); 
} 



function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 

    request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
    } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
} 

    function doNothing() {} 

    //]]> 
    </script> 
     </head> 
<body onload="load()"> 

<style type="text/css"> 
div#map { margin: 0 auto 0 auto; } 
</style> 

    <div id="map" style="width: 80%; height: 500px"></div> 
    </body>

來源

2016-12-14 Dave

I M上傳其中我在我的系統中中心用於地圖顯示演示代碼。希望這會幫助你。

邏輯

$ RESULT_COUNT = $ query_count->結果（）; //計數行

$count = $result_count[0]->total/2; 
if($count % 2 == 0){ 
    $cal = $count - 0.5; 
    $query_latlng = $this->db->query("SELECT latitude, longitude FROM 'table_name' WHERE id = '$cal' "); 
    $result_latlng = $query_latlng->result(); 

} 
else{ 
    $cal = $count; 
    $query_latlng = $this->db->query("SELECT latitude, longitude FROM 'table_name' WHERE id = '$cal' "); 
    $result_latlng = $query_latlng->result(); 
}

谷歌地圖

var cluster = []; 
      var map = new google.maps.Map(document.getElementById("map"), { 
      center: new google.maps.LatLng(<?php echo $result_latlng[0]->latitude; ?>,<?php echo $result_latlng[0]->longitude; ?>), 
      zoom: 4, 
      mapTypeId: 'roadmap' 
      });

來源

2016-12-14 10:41:28

使用地理位置設置谷歌地圖中心

回答

相關問題