Question

我想找一个显示表格的javascript，每一行都是一个地址。如果选中某行，则应在下方的Google地图上显示标记。

有什么建议吗？

Answer 1

这是一个脚本，用于根据表格中的复选框切换标记。我使用jQuery进行表单交互。如果用户第一次点击标记，此脚本仅发送地理编码请求。

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
        </script>
        <script type="text/javascript" src= "http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script>
            var geocoder;
            var map;
            markers = [];
            function initialize(){
                geocoder = new google.maps.Geocoder();
                var latlng = new google.maps.LatLng(-34.397, 150.644);
                var myOptions = {
                    zoom: 8,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            }

            function codeAddress(address){
                //check if this marker is already in array
                geocoder.geocode({
                    'address': address
                }, 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
                        });
                        //keep track of your markers, i am using address here as an ID but anything else can be used such as element id 
                        markers.push({
                            id: address,
                            marker: marker
                        })
                    }
                    else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });
            }

            function isGeocoded(address){
                //check if marker is in marker array
                index = inArray(address)
                if (index >= 0) {
                    m = markers[index].marker
                    //is marker visible ?
                    if (m.getMap() === null) {
                        m.setMap(map)
                        //pan map to the toggled marker
                        map.panTo(m.position)
                    }
                    else {
                        //toggle marker
                        m.setMap(null);
                    }


                }
                else {
                    codeAddress(address);
                }
            }

            function inArray(address){
                for (i = 0; i < markers.length; i++) {
                    if (markers[i].id == address) {
                        return i
                    }
                }

            }

            $(document).ready(function(){
                $("table .ch").change(function(){

                    isGeocoded($(this).val());

                })

            })
        </script>
    </head>
    <body onload="initialize()">
        <div id="map_canvas" style="width: 320px; height: 480px;">
        </div>
        <div>
            <table>
                <tr>
                    <td>
                        <input type="checkbox" class="ch" value="Sydney, NSW">
                    </td>
                    <td>
                        Sydney, NSW
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="ch" value="40 Devon St, Christchurch, New Zealand">
                    </td>
                    <td>
                        40 Devon St, Christchurch, New Zealand
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

可检查的javascript表格以显示谷歌地图标记

1 个答案: