Question

我试图从一个onClick执行两个单独的功能。

它是一个字典服务，它返回Glosbi API中的定义，第二个函数是Google Maps API调用，它将地图更改为已搜索的内容。

第一个功能完美无缺，但调用Google Maps API的第二个功能无效。

任何人都可以在我的代码中看到任何不正确或需要更改的内容吗？我感觉非常亲密！

function codeTerm() {
    $(document).ready(function(){

        $('#term').focus(function(){
            var full = $("#definition").has("definition").length ? true : false;
            if(full === false){
                $('#definition').empty();
            }
        });

        var getDefinition = function(){
            var word = $('#term').val();

            if(word === ''){
                $('#definition').html("<h2 class='loading'>We haven't forgotten to validate the form! Please enter a word.</h2>");
            }
            else {
                $('#definition').html("<h2 class='loading'>Your definition is on its way!</h2>");
                $.getJSON("http://glosbe.com/gapi/translate?from=eng&dest=eng&format=json&phrase=" +word+ "&pretty=true&callback=?", function(json) {
                    if (json !== "No definition has been found."){
                        var meanings = "";
                        json["tuc"].forEach(function(tuc) {
                            if (typeof tuc["meanings"] !== 'undefined') {
                                tuc["meanings"].forEach(function(m) {
                                    meanings += "<p>"+m["text"]+"</p>\n";
                                }); 
                            }
                        });

                        $("#definition").html(meanings);
                    } 
                    else {
                        $.getJSON("http://glosbe.com/gapi/translate?from=eng&dest=eng&format=json&phrase=&pretty=true" + "?callback=?", function(json) {
                            console.log(json);
                            $('#definition').html('<h2 class="loading">Nothing found.</h2><img id="thedefinition" src=' + json.definition[0].image.url + ' />');
                        });
                    }
                });
            }
            return false;
        };

        $('#search').click(getDefinition);
        $('#term').keyup(function(event){
            if(event.keyCode === 13){
                getDefinition();
            }
        });
    });
}

var geocoder;
var map;

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
        zoom: 8,
        center: latlng
    }

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function codeAddress() {
    var country = document.getElementById('search').value;
    geocoder.geocode( { 'search': country}, 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);
        }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

$('#search').click(country);
$('#term').keyup(function(results){
    if(results.keyCode === 13){
       country();
    }
});

和HTML

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="author" content="Matthew Hughes">
    <meta name="Dictionary" content="A dictionary web service">
    <title>Dictionary Web Application</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
    <script src="dictionary.js"></script>
    <link rel="stylesheet" href="style.css" /> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCVD1Kaf1yE4M9IcBNRAyujObcY2sGI0J0&sensor=false"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script src="dictionary.js"></script>



</head>

<body>

    <div id="container">

        <div id="top">

            <header>

                <h1>Dictionary Application</h1>

            </header>

        </div>

        <div id="app">

            <div id="panel">

                <input id="term" type="text" placeholder="Enter a word...">
                <button id="search" onclick="codeTerm(); codeAddress();">Define!</button>


            </div>

        <section id="definition">

        </section>

              <div id="map-canvas">

              </div>

        </div>



        <footer>

            <p>Created by Matthew Hughes</p>

        </footer>

    </div>

</body>

谢谢！

Answer 1

在评论中你提到了2个错误......

google未定义

包含Google API是否成功？你有这个：

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCVD1Kaf1yE4M9IcBNRAyujObcY2sGI0J0&sensor=false"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

这些参考是否有效？在浏览器调试工具中，查看网络选项卡。如果有的话，这些电话会返回什么？听起来API没有成功加载。您是否需要具体为https的人？尝试省略协议，使其默认为当前页面的协议：

<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCVD1Kaf1yE4M9IcBNRAyujObcY2sGI0J0&sensor=false"></script>
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

您还要将您的一个JavaScript库包括两次：

<script src="dictionary.js"></script>

可能不会破坏任何内容，但可能。无论如何，它只应包含一次。

国家（如果未定义）

您在其中一个函数中创建了一个名为country的变量：

function codeAddress() {
    var country = document.getElementById('search').value;
    // other code
}

所以它的范围仅在该函数内。但是你也尝试在该函数之外引用它，并尝试将它作为函数引用：

$('#search').click(country);
$('#term').keyup(function(results){
    if(results.keyCode === 13){
       country();
    }
});

因此，即使它被移动到全局范围，country也不是一个函数，所以不清楚你要用这两个处理程序完成什么。也许你想调用一个不同的函数？

从一个按钮调用两个JavaScript函数

1 个答案: