如何将lat,lng信息传递给谷歌地图

时间:2013-08-15 07:08:26

标签: javascript google-maps google-maps-api-3

我刚刚发言,我想在谷歌地图上突出显示该地址,并进行一些修改,例如circle sample

这是帮助获取lat,lng信息Function returning undefined in Geocoder

的资源

$location保留位置地址

function getLatLng(callback){
    var geocoder = new google.maps.Geocoder();
    var latlng = new Array(2);

    // get Lat, Lang
    geocoder.geocode({'address': '<?php echo $location ?>', 'region': 'UK'}, function(results, status){
         if (status == google.maps.GeocoderStatus.OK) {
               latlng[0] = results[0].geometry.location.lat();
               latlng[1] = results[0].geometry.location.lng();
               callback(latlng); // call the callback function here

          } else {
              console.log( "Unable to find address: " + status );
          }
       });
   }

   var citymap = {};
   var CityCircle;

   citymap['<?php echo $location ?>'] = {
       center: getLatLng(function(latlng){ return latlng; }), 
       population: 2842518
   };

但我无法将lat,lng信息发送到地图,我收到错误
TypeError: c[tb] is not a function

我知道&#34; geocode()&#34;功能是异步,有没有其他选择,以便我只能通过地址实现 Circle Simple

已解决并更新了ANSWER:

我用以下方法解决了这个问题:

function getLatLng(location){
    var geocoder = new google.maps.Geocoder();
    var latlng = new Array(2);

    // get Lat, Lang
    geocoder.geocode({'address': location, 'region': 'UK'}, function(results, status){
         if (status == google.maps.GeocoderStatus.OK) {
               latlng[0] = results[0].geometry.location.lat();
               latlng[1] = results[0].geometry.location.lng();
               //callback(latlng); // call the callback function here

               var citymap = {};
               var CityCircle;

               citymap['<?php echo $location ?>'] = {
                  center: new google.maps.LatLng(latlng[0], latlng[1]), 
                  population: 2842518
               };
               // rest code here
               function initialize(){ .... }

               // initialized map function without onload
               initialize();

          } else {
              console.log( "Unable to find address: " + status );
          }
       });
   }

   setTimeout(function(){ getLatLng('<?php echo $location ?>'); }, 1000);

希望这有助于某人

1 个答案:

答案 0 :(得分:0)

这是我认为你在追求的一个例子

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">


  <link rel="stylesheet" type="text/css" href="https://developers.google.com/maps/documentation/javascript/examples/default.css">

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

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

var cityCircle;
// Create an object containing LatLng, population.
function loadCities(map) {
  var citymap = {};
  citymap['chicago'] = {
    location: 'chicago',
    population: 2842518
  };
  citymap['london'] = {
    location: 'london',
    population: 4000000
  };


  getLatLng(citymap['chicago'], function(city) { 
      addCityToMap(city, map);
  });

  getLatLng(citymap['london'], function(city) { 
      addCityToMap(city, map);
  });
}

function getLatLng(city, callback){
    var geocoder = new google.maps.Geocoder();
    var latlng = new Array(2);

    // get Lat, Lang
    geocoder.geocode({'address': city.location, 'region': 'UK'}, function(results, status){
        if (status == google.maps.GeocoderStatus.OK) {
            latlng[0] = results[0].geometry.location.lat();
            latlng[1] = results[0].geometry.location.lng();

            city.center = new google.maps.LatLng(latlng[0], latlng[1]);
            callback(city); // call the callback function here
        } else {
            console.log( "Unable to find address: " + status );
        }
   });
}

function addCityToMap(city, map) {
    // Construct the circle for each value in citymap. We scale population by 20.
    var populationOptions = {
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: city.center,
      radius: city.population / 20
    };
    cityCircle = new google.maps.Circle(populationOptions);
}

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(37.09024, -30.712891),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  loadCities(map);
}

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

</script>


</head>
<body>
  <div id="map-canvas"></div>

</body>


</html>