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

本文关键字：显示 地址 谷歌地图 | 更新日期: 2023-09-27 18:27:03

我正在使用jquery在我的asp.net页面上显示谷歌地图。我有国名、公司名、地址和经纬度。

现在我已经在下拉列表中添加了所有地址，在下拉选择的基础上，我已经在代码中传递了经度和纬度。这个部分正在根据纬度和经度显示地图。但是我没有一些公司的经度和纬度。所以我想直接用公司地址来显示地图。

这是我使用的代码：

  <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-69130 Lyon-Écully，France

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

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

您可以执行以下操作：

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

或者您可以检查这两个服务以寻找替代方案。我已经打印出了他们发给你的大部分数据，只需点击"查找我"按钮。但把你的控制台拉起来，就能看到这一切。

Codepen.io 示例

您可以使用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();
});
相关文章：