Question

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

现在我已经在下拉列表中添加了所有地址，根据下拉选择我已经在代码中传递了经度和纬度。这部分工作，因为它显示基于纬度和经度的地图。但我没有经度和一些comapnies的纬度。所以我想直接使用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 - 69130 Lyon-Écully，法国

我可以在这个地址的基础上显示地图。如果需要，请告诉我更多说明。

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 Example

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

3 个答案: