如何在谷歌地图上显示地址

Question

我正在使用jquery在我的asp.net页面上显示google map。我有国家名称，公司名称，地址，经度和纬度。

现在我已经在下拉列表中添加了所有地址，根据下拉列表的选择，我已经在代码中传递了经度和纬度。这部分正在工作，因为它基于纬度和经度显示地图。但是对于某些情况，我没有经度和纬度因此，我想直接使用comapnies的地址来显示地图。

这是我使用的代码：

  <script src="js/jquery/jquery-1.9.0.min.js"></script>
    <!-- <msdropdown> -->
    <link rel="stylesheet" type="text/css" href="css/msdropdown/dd.css" />
    <script src="js/msdropdown/jquery.dd.js"></script>



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


    <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
    </script>


    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places">
    </script>
    </head>
    <body onload="initialize()">
    <select  id="countries" style="width:300px;" onchange="updateMap(this.options[this.selectedIndex].value)">
          <option value='TVSH - Rruga Ismail Quemali 11>TVSH - Rruga Ismail Quemali 11, Tirana</option></select>


  function updateMap(selectControl) {
            alert(selectControl);
            switch (selectControl) {
                case 'TVSH - Rruga Ismail Quemali 11, Tirana':
                    var polyline = new google.maps.Polyline({
                        path: [

  new google.maps.LatLng(41.321102, 19.823112)],
                        strokeColor: "#FF0000",
                        strokeOpacity: 1.0,
                        strokeWeight: 2
                    });

                    var latLng = new google.maps.LatLng(41.321102, 19.823112)
                    break;

                default:
                    break;
            }
            initialize(polyline, latLng);
        }

        function initialize(polyline, schoolLatLng) {
            var myLatLng = schoolLatLng;
            var myOptions = {
                zoom: 13,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };


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

            polyline.setMap(map);

        }

现在地图是根据纬度和经度显示的。有没有办法让我直接在基本地址上显示地图？我有以下所有公司的地址： EURONEWS-60，chemin des Mouilles-69130Lyon-Écully，France

我可以在此地址的基础上显示地图吗？如果需要，请问更多我的描述。

Answer 1

您可以使用Geocoding API ，该API的目的正是将地址转换为坐标，然后像您已经做的那样，使用此坐标可以渲染地图。

例：

var geocoder = new google.maps.Geocoder();
//convert location into longitude and latitude
geocoder.geocode({
    address: 'chemin des Mouilles - 69130 Lyon-Écully, France'
}, function(locResult) {
    var lat1 = locResult[0].geometry.location.lat();
    var lng1 = locResult[0].geometry.location.lng();
});

Answer 2

您可以执行以下操作：

var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': 'chemin des Mouilles - 69130 Lyon-Écully, France'}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
    });
  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
});

但是请注意，因为地址解析器是异步的。

https://developers.google.com/maps/documentation/javascript/geocoding

Answer 3

或者，您可以检查这两种服务以找到替代方案。 我已经打印了大部分数据，并将它们发送回给您，只需点击“查找我”按钮。 但是请拉起控制台以查看所有内容。

Codepen.io示例