在html文本字段上显示Infowindow内容

时间:2015-05-10 11:56:29

标签: javascript html google-maps google-maps-api-3 infowindow

这是一个javascript代码,显示当您点击某个位置时标记弹出的纬度和经度..现在如何在html文本字段中显示infowindow作为自动填充的结果?

                       <script>
                            var map;
                            var myCenter = new google.maps.LatLng(31.7108, 35.1986);

                            function initialize()
                            {
                                var mapProp = {
                                    center: myCenter,
                                    zoom: 16,
                                    mapTypeId: google.maps.MapTypeId.ROADMAP
                                };

                                map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

                                google.maps.event.addListener(map, 'click', function (event) {
                                    placeMarker(event.latLng);
                                });
                            }

                            function placeMarker(location) {
                                var marker = new google.maps.Marker({
                                    position: location,
                                    map: map,
                                });
                                var infowindow = new google.maps.InfoWindow({
                                    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
                                });
                                infowindow.open(map, marker);
                            }

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

这是html表单

                                <tr>
                                    <td>latitude</td><td> <input type="float" name="lat"></td> 
                                </tr>
                                <tr>
                                    <td>longitude</td><td> <input type="float" name="lng"></td> 
                                </tr>

1 个答案:

答案 0 :(得分:0)

HTML

<tr>
     <td>latitude</td><td> <input id="input-lat" type="float" name="lat"></td> 
</tr>
<tr>
     <td>longitude</td><td> <input id="input-lng" type="float" name="lng"></td> 
</tr>

javascript

 function placeMarker(location) {
     (function(location){
     var marker = new google.maps.Marker({
                  position: location,
                  map: map,
                  });
     var infowindow = new google.maps.InfoWindow({
                      content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
                      });
   google.maps.event.addListener(marker, "click", function () {
                infowindow.open(map, this);
                $("#input-lat").val(location.lat());
                $("#input-lng").val(location.lng());
   });
    })(location);

  }

我希望这有帮助:)