为什么我的onClick给我一个Uncaught ReferenceError：未定义clickState

Question

Here is my JS code: there is a lot going on, but I just trying to get the click event to work ... I am certain I have more changes to make but I just want to get this basic functionality to work.

<script type="text/javascript">
        $(document).ready(function () {
            // Map options
            var mapOptions = {
                center: new google.maps.LatLng(37.09024, -100.4179324),
                zoom: 5,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

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


            // Markers
            var locations = [];
            var allMarkers = [];

            locations.push({ name: "Chicago", latlng: new google.maps.LatLng(41.878114, -87.629798), state: "Illinois" });
            locations.push({ name: "New York", latlng: new google.maps.LatLng(40.712784, -74.005941), state: "New York" });
            locations.push({ name: "Los Angeles", latlng: new google.maps.LatLng(34.052234, -118.243685), state: "California" });
            locations.push({ name: "Washington DC", latlng: new google.maps.LatLng(38.907192, -77.036871), state: "District of Colombia" });
            locations.push({ name: "Cincinnati", latlng: new google.maps.LatLng(39.103118, -84.512020), state: "Ohio" });
            locations.push({ name: "Houston", latlng: new google.maps.LatLng(29.760427, -95.369803), state: "Texas" });
            locations.push({ name: "Seattle", latlng: new google.maps.LatLng(47.606209, -122.332071), state: "Washington" });
            locations.push({ name: "Miami", latlng: new google.maps.LatLng(25.761680, -80.191790), state: "Florida" });
            locations.push({ name: "Newark", latlng: new google.maps.LatLng(40.735657, -74.172367), state: "New Jersey" });
            locations.push({ name: "Denver", latlng: new google.maps.LatLng(37.739236, -104.990251), state: "Colorado" });

            // Add the Markers to the map
            var bounds = new google.maps.LatLngBounds();

            for (var i = 0; i < locations.length; i++) {

                var marker = new google.maps.Marker({
                    position: locations[i].latlng, map: map, title: locations[i].name,
                    html: "<font color=" + "blue><strong>" + locations[i].state + "</strong></font>"
                });

                bounds.extend(locations[i].latlng);
                var infowindow = new google.maps.InfoWindow();

                google.maps.event.addListener(marker, "click", (function (marker) {
                    return function (e) {
                        infowindow.setContent(this.html);
                        infowindow.open(map, this);
                    }
                })(marker))


            }

            map.fitBounds(bounds);

            function clickState() {
                var latLng = new google.maps.LatLng(41.881832, -87.623177);
                map.panTo(latLng);
            }
        });

    </script>

and here is my markup: this is just a test ... I am playing with creating a way to pan on my map by state:

h1>Community Wildlife Habitat</h1>
<div class="container">
    <div class="row">
        <div class="col-lg-2 col-md-12">
            <h2><u>Links</u></h2>
            <ul style="list-style:none;">
              <!--  <li>@*Html.ActionLink("Forum", "forum", "Home")*@</li> -->
                <li onclick="clickState();">Click on a State</li>
            </ul>
        </div>
        <div class="col-lg-10 col-md-12">
            <div id="map" class="img-responsive" style="width:720px; height: 400px;">
            </div>
        </div>

    </div>
</div> 

Answer 1

You should move your clickState outside the ready function

<script>
     function clickState() {
            var latLng = new google.maps.LatLng(41.881832, -87.623177);
            map.panTo(latLng);
      }
</script>



<script type="text/javascript">
      $(document).ready(function () {
        .....
</script>

because the inner function ar not visible at window level