Question

我的目标是使用一个地图，该地图位于用户当前位置，并显示从mysql数据库中提取的标记。我可以在指定的时候让我的地图显示某个lat或lng，但是我无法获取用户的当前位置并使用它来修改地图的中心。

任何帮助将不胜感激！

：）

 <!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>

Answer 1

我正在上传我在系统中用于中心地图显示的演示代码。希望这会对你有所帮助。

<强>逻辑

$ result_count = $ query_count-＆gt; result（）; //计数行

$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();
}

Google地图

 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'
          });

使用地理位置设置谷歌地图中心

1 个答案: