谷歌地图 + 带 SQL 的地理位置答案

【问题标题】：Google Maps + Geo-location w/ SQL谷歌地图 + 带 SQL 的地理位置
【发布时间】：2011-09-06 23:02:30
【问题描述】：

我有一个脚本，可以在 SQL 数据库中显示一堆地址（它们都经过地理编码）并将它们放在谷歌地图上。我似乎无法弄清楚如何使用他们的移动设备 GPS 将地图中心放在用户的位置上。我有一个脚本可以做到这一点，但我不知道如何结合这两个功能。任何人？请帮帮我，失眠了……

这是我的代码：

    <?php
    require_once('/home/session_data.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta name="viewport" content="width=480px"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>TEST</title>
<script src="http://www.google.com/jsapi?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></script>
<script>
    (function () {
        google.load("maps", "2");
        google.setOnLoadCallback(function () {

            // Create map
            var map = new google.maps.Map2(document.getElementById("map")),
                markerText = "<?php echo $_SESSION['SESS_FULL_NAME']?> - #<?php echo $_SESSION['SESS_MEMBER_ID']?><br><?php echo $_SESSION['SESS_DEPT']?> - <?php echo $_SESSION['SESS_REGION']?>",
                markOutLocation = function (lat, long) {
                    var latLong = new google.maps.LatLng(lat, long),
                        marker = new google.maps.Marker(latLong);
                    map.setCenter(latLong, 13);
                    map.addOverlay(marker);
                    marker.openInfoWindow(markerText);
                    google.maps.Event.addListener(marker, "click", function () {
                        marker.openInfoWindow(markerText);
                    });
                };
                map.setUIToDefault();

            // Check for geolocation support    
            if (navigator.geolocation) {
                // Get current position
                navigator.geolocation.getCurrentPosition(function (position) {
                        // Success!
                        markOutLocation(position.coords.latitude, position.coords.longitude);
                    }, 
                    function () {
                        // Gelocation fallback: Defaults to New York, US
                        markerText = "<p>Please accept geolocation for me to be able to find you. <br>I've put you in New York for now.</p>";
                        markOutLocation(40.714997,-74.006653);
                    }
                );
            }
            else {
                // No geolocation fallback: Defaults to Eeaster Island, Chile
                markerText = "<p>No location support. Try Easter Island for now. :-)</p>";
                markOutLocation(-27.121192, -109.366424);
            }
        }); 
    })();
</script>
<script type="text/javascript"> 

//<![CDATA[

      // this variable will collect the html which will eventually be placed in the side_bar 

      var side_bar_html = ""; 



      // arrays to hold copies of the markers and html used by the side_bar 

      // because the function closure trick doesnt work there 

      var gmarkers = []; 



     // global "map" variable

      var map = null;

// A function to create the marker and set up the event window function 

function createMarker(latlng, name, html) {

    var contentString = html;

    var marker = new google.maps.Marker({

        position: latlng,

        map: map,

        zIndex: Math.round(latlng.lat()*-100000)<<5

        });



    google.maps.event.addListener(marker, 'click', function() {

        infowindow.setContent(contentString); 

        infowindow.open(map,marker);

        });

    // save the info we need to use later for the side_bar

    gmarkers.push(marker);

    // add a line to the side_bar html

    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';

}



// This function picks up the click and opens the corresponding info window

function myclick(i) {

  google.maps.event.trigger(gmarkers[i], "click");

}



function initialize() {

  // create the map

  var myOptions = {

    zoom: 8,

    center: new google.maps.LatLng(43.907787,-79.359741),

    mapTypeControl: true,

    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},

    navigationControl: true,

    mapTypeId: google.maps.MapTypeId.ROADMAP

  }

  map = new google.maps.Map(document.getElementById("map_canvas"),

                                myOptions);



  google.maps.event.addListener(map, 'click', function() {

        infowindow.close();

        });

      // Read the data from example.xml

      downloadUrl("phpsqlajax_genxml2.php", function(doc) {

        var xmlDoc = xmlParse(doc);

        var markers = xmlDoc.documentElement.getElementsByTagName("marker");

        for (var i = 0; i < markers.length; i++) {

          // obtain the attribues of each marker

          var lat = parseFloat(markers[i].getAttribute("lat"));

          var lng = parseFloat(markers[i].getAttribute("lng"));

          var point = new google.maps.LatLng(lat,lng);

          var html = markers[i].getAttribute("html");

          var label = markers[i].getAttribute("label");

          // create the marker

          var marker = createMarker(point,label,html);

        }

        // put the assembled side_bar_html contents into the side_bar div

        document.getElementById("side_bar").innerHTML = side_bar_html;

      });

    }



var infowindow = new google.maps.InfoWindow(

  { 

    size: new google.maps.Size(150,50)

  });

//]]>

</script> 
</head>

  <body onload="load()" onunload="Unload()">
    <div id="map" style="width: 480px; height: 300px"></div>
  </body>
</html>

【问题讨论】：

标签： php sql maps location

【解决方案1】：

您只提供了#map，但您的一半代码处理#map_canvas..？

在你的第一个脚本中，你已经声明了一个“map”变量，在你的第二个脚本中，在 initialize() 下，你再次声明它，我认为它会覆盖你的第一个“map”，这对于居中提供的 latlong 是必不可少的var markOutLocation。

我建议在初始化函数（）中重命名“地图”及其关系，我假设它将控制另一个地图元素。

【讨论】：

【解决方案2】：

您使用的似乎是旧版本的 google maps API。版本 3 是最新的。 Here's the getting started page.

为了指示 Google 映射到 use a GPS sensor，javascript 加载了 sensor=true。注意在 V3 中，sensor 参数是必需的，所以如果你不想让它使用 GPS，你必须明确地将它设置为 false：

#
# Example using sensor when loading the Maps JavaScript API
#
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

这里还有一个Google code snippet，以用户位置为中心。它尝试了多种不同的方法来解析用户的位置：

// Note that using Google Gears requires loading the Javascript
// at http://code.google.com/apis/gears/gears_init.js

var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag =  new Boolean();

function initialize() {
  var myOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  // Try W3C Geolocation (Preferred)
  if(navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  // Try Google Gears Geolocation
  } else if (google.gears) {
    browserSupportFlag = true;
    var geo = google.gears.factory.create('beta.geolocation');
    geo.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeoLocation(browserSupportFlag);
    });
  // Browser doesn't support Geolocation
  } else {
    browserSupportFlag = false;
    handleNoGeolocation(browserSupportFlag);
  }

  function handleNoGeolocation(errorFlag) {
    if (errorFlag == true) {
      alert("Geolocation service failed.");
      initialLocation = newyork;
    } else {
      alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
      initialLocation = siberia;
    }
    map.setCenter(initialLocation);
  }
}

map.setCenter(initialLocation);

是以指定的纬度/经度为中心的地图（在这种情况下是用户的位置）。

【讨论】：