如果我的某些地址沒有緯度/經度，如何在GoogleMapsAPI中對地址進行地理編碼？

我用這種方式在谷歌地圖（php js）上顯示了幾個標記：

<?php    
$addresses = [
      ['Location 1', 'Prá?ská 1882/14a, 106 00 Praha 10-Záběhlice, Czech', 'Location 1 URL', , ],
      ['Location 2', 'Chrudimská 2b, 130 00 Praha 3-Vinohrady, Czech', 'Location 2 URL', 50.07723230323565, 14.462862694350086],
      ['Location 3', 'Tachovské nám. 290/5, 130 00 Praha 3-?i?kov, Czech', 'Location 3 URL', 50.08810372337146, 14.453470938091115]
    ];
?>
<script>
    var locations = <?php echo $addresses; ?>;
    var geocoder;
    var map;
    var bounds = new google.maps.LatLngBounds();
    
    function initialize() {
      map = new google.maps.Map(
        document.getElementById("map_canvas"), {
          center: new google.maps.LatLng(50.080271523996146, 14.46584830762666),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
      
    
      for (i = 0; i < locations.length; i  ) {
        geocodeAddress(locations, i);
      }
    }
    google.maps.event.addDomListener(window, "load", initialize);
    
    function geocodeAddress(locations, i) {
      var title = locations[i][0];
      var address = { 'address': locations[i][1] };
      var url = locations[i][2];
      var address = locations[i][1];
      var latlng = { lat: locations[i][3], lng: locations[i][4] };
    
      var marker = new google.maps.Marker({
          icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
          map: map,
          position: latlng,
          title: title,
          animation: google.maps.Animation.DROP,
          address: address,
    
        })
        infoWindow(marker, map, title, address, url);
        bounds.extend(marker.getPosition());
        map.fitBounds(bounds);
    
        
        
    }
    
    function infoWindow(marker, map, title, address, url) {
      google.maps.event.addListener(marker, 'click', function() {
        var html = "<div><h3>"   title   "</h3><p>"   address   "</p></div>";
          
        iw = new google.maps.InfoWindow({
          content: html,
          maxWidth: 350
        });
        iw.open(map, marker);
      });
    }
    
    function createMarker(results) {
      var marker = new google.maps.Marker({
        icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
        map: map,
        position: results[0].geometry.location,
        title: title,
        animation: google.maps.Animation.DROP,
        address: address,
        url: url
      })
      bounds.extend(marker.getPosition());
      map.fitBounds(bounds);
      infoWindow(marker, map, title, address, url);
      return marker;
    }
</script>

您可以看到在第一個位置經度和緯度丟失，因為它們沒有出現在我的陣列/我的資料庫中。谷歌地圖api是否有一種簡單的方法/已經存在的函式來從字串地址或類似的東西中獲取這些值？我想要一些類似的東西：

function geocodeAddress(locations, i) {
          var title = locations[i][0];
          var address = { 'address': locations[i][1] };
          var url = locations[i][2];
          var address = locations[i][1];

if (locations[i][3]=== "") 
{
locations[i][3] = getLatFromAddress(locations[i][1]);
}
if (locations[i][4]=== "")
{
locations[i][4] = getLngFromAddress(locations[i][1]);
}
          var latlng = { lat: locations[i][3], lng: locations[i][4] };
        
          var marker = new google.maps.Marker({
              icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
              map: map,
              position: latlng,
              title: title,
              animation: google.maps.Animation.DROP,
              address: address,
        
            })
            infoWindow(marker, map, title, address, url);
            bounds.extend(marker.getPosition());
            map.fitBounds(bounds);
        }

出于某種原因，我無法修改 $addresses 結構。所以只有我必須更改/添加一些 js。有什么辦法可以解決這個問題？

uj5u.com熱心網友回復：

如果您沒有緯度或經度，請呼叫 代碼片段：

var locations = [
  ['Location 1', 'Prá?ská 1882/14a, 106 00 Praha 10-Záběhlice, Czech', 'Location 1 URL', , ],
  ['Location 2', 'Chrudimská 2b, 130 00 Praha 3-Vinohrady, Czech', 'Location 2 URL', 50.07723230323565, 14.462862694350086],
  ['Location 3', 'Tachovské nám. 290/5, 130 00 Praha 3-?i?kov, Czech', 'Location 3 URL', 50.08810372337146, 14.453470938091115]
];
var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(50.080271523996146, 14.46584830762666),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  geocoder = new google.maps.Geocoder();

  for (i = 0; i < locations.length; i  ) {
    geocodeAddress(locations, i);
  }
}
google.maps.event.addDomListener(window, "load", initialize);

function geocodeAddress(locations, i) {
  var title = locations[i][0];
  var address = {
    'address': locations[i][1]
  };
  var url = locations[i][2];
  var address = locations[i][1];

  if ((locations[i][3] === undefined) || (locations[i][4] === undefined)) {
    geocoder.geocode({
      address: address
    }, function(result, status) {
      createMarker(result[0].geometry.location, title, address, url);
    });
  } else {

    var latlng = {
      lat: locations[i][3],
      lng: locations[i][4]
    };
    createMarker(latlng, title, address, url);
  }
}

function createMarker(latlng, title, address, url) {
  var marker = new google.maps.Marker({
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
    map: map,
    position: latlng,
    title: title,
    animation: google.maps.Animation.DROP,
    address: address,

  })
  infoWindow(marker, map, title, address, url);
  bounds.extend(marker.getPosition());
  map.fitBounds(bounds);
}

function infoWindow(marker, map, title, address, url) {
  google.maps.event.addListener(marker, 'click', function() {
    var html = "<div><h3>"   title   "</h3><p>"   address   "</p></div>";

    iw = new google.maps.InfoWindow({
      content: html,
      maxWidth: 350
    });
    iw.open(map, marker);
  });
}

/*    function createMarker(results) {
      var marker = new google.maps.Marker({
        icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
        map: map,
        position: results[0].geometry.location,
        title: title,
        animation: google.maps.Animation.DROP,
        address: address,
        url: url
      })
      bounds.extend(marker.getPosition());
      map.fitBounds(bounds);
      infoWindow(marker, map, title, address, url);
      return marker;
    }
*/

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#map_canvas {
  height: 100%;
  width: 100%;
}

<html>

<head>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

</head>

<body>
  <div id="map_canvas">
</body>

</html>

標籤：谷歌地图

上一篇：在表單中使用switch回傳不同的<Input>回傳Input

下一篇：XamarinAndroid.Media.Mediaplayer左右音量不起作用