将地址转换为纬度和经度js

时间:2016-02-03 14:05:32

标签: javascript php google-maps

我需要将我的php地址转换为js然后转换为纬度和经度。 我有下面显示的代码,它初始化地图。

var LocationData = [
    [-40.156886, -71.352581, "Plaza San Martin" ], 
    [-40.155116, -71.345129, "Asoc Hotelera SMA" ], 
    [-40.156763, -71.354438, "Cheminee" ], 
    [-40.155888, -71.350558, "Airdesign" ], 
    [-40.157998, -71.353683, "Dubling" ]
]; 
function initialize()
{
    var map = new google.maps.Map(document.getElementById('map-canvas'));
    var bounds = new google.maps.LatLngBounds();
    var infowindow = new google.maps.InfoWindow();

    for (var i in LocationData)
    {
        var p = LocationData[i];
        var latlng = new google.maps.LatLng(p[0], p[1]);
        bounds.extend(latlng);

        /*var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: p[2]
        });*/
    var image = 'img/pin_pink.png';
        var pin_pink_marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: image,
        title: p[2]
    });

        google.maps.event.addListener(pin_pink_marker, 'click', function() {
            infowindow.setContent(this.title);
            infowindow.open(map, this);
        });
    }

    map.fitBounds(bounds);
}

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

php中的地址来自数据库中的查询,它显示在表格中。我还想告诉你的是,我不知道我将在地图中显示多少地址。数字可能会根据我的查询而改变。

1 个答案:

答案 0 :(得分:1)

更新:

<!DOCTYPE html>
<html>
    <head>
        <title>lat/long</title>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    </head>

    <body onload="initialize()">
        <div id="map-canvas" style="width:800px; height:500px;"></div>
        <?php

            $array = Array(
                "R. Aurora, 611 - Santa Ifigênia, São Paulo - SP, 01209-001",
                "R. dos Timbiras, 521 - Santa Ifigênia, São Paulo - SP",
                "R. Vitória, 678 - Jardim Ataliba Leonel, São Paulo - SP, 02324-250",
                "R. Joaquim Gustavo, 531 - República, São Paulo - SP, 01045-020",
                "R. Conselheiro Nébias, 236 - Campos Elíseos, São Paulo - SP"
            );
        ?>
    </body>

</html>
<script>var address = new Array(<?php echo "'".implode("','", $array)."'"?>);</script> 
<script src="map.js"></script>
<script>setTimeout(function(){codeAddress()},1000);</script>

map.js

var geocoder;
var map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var mapOptions = {
    zoom: 16,
  }
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

function codeAddress() {

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

    geocoder.geocode( { 'address': address[i]}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {

        map.setCenter(results[0].geometry.location);

        str = String(results[0].geometry.location);
        var comma = str.indexOf(",");

        lat = str.substr(1,comma -1);
        lng = str.substr(comma+1, str.length-comma-2);

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

        var image = 'http://icons.iconarchive.com/icons/pelfusion/long-shadow-media/32/Maps-Pin-Place-icon.png';

        var marker = new google.maps.Marker({
            map: map,
            position: latlng,
            icon: image,
            title: results[0].address_components[1].long_name
        });

      } else {
        //alert("Geocode was not successful for the following reason: " + status);
      }
    });        
  }
}

下载:https://github.com/leandrocfe/LatLong