个人中心
gpt4 book ai didi

javascript - Google map API 有错误 "uncaught referenceerror: system is not defined"

转载 作者：行者123 更新时间：2023-11-28 00:24:54 30 4
gpt4 key购买 nike

我目前正在开发一个类似“uber”的网络应用程序，并正在使用谷歌地图 API。

现在我有一个 home.jsp 页面，其中包含以下代码:

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

    <title>Home Page</title>
    <style type="text/css">
        div.nav{
            text-align:right;
        }
        div.right{
            display:inline;
        }
    </style>
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src=
    "https://google-maps-utility-library-v3.googlecode.com/svn/trunk/geolocationmarker/src/geolocationmarker-compiled.js"></script>
    <script language="JavaScript" type="text/javascript">
        var map;

        function initialize() {
            var mapOptions = {
                zoom: 13
            };
            map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    var infowindow = new google.maps.InfoWindow({
                        map: map,
                        position: pos,
                        content: 'Current Location'
                    });
                    map.setCenter(pos);
                }, function() {
                    handleNoGeolocation(true);
                });
            } else {
                handleNoGeolocation(false);
            }
        }

        function handleNoGeolocation(errorFlag) {
            if (errorFlag) {
                var content = 'Error: The Geolocation service failed.';
            } else {
                var content = 'Error: Your browser doesn\'t support geolocation.';
            }
            var options = {
                map: map,
                position: new google.maps.LatLng(60, 105),
                content: content
            };
            var infowindow = new google.maps.InfoWindow(options);
            map.setCenter(options.position);
        }

        function codeAddress() {
            var addr = document.getElementById('destaddress').value;

            geo.geocode({
                'address': addr
            }, function(results, status) {
                console.error(status);
                if (status === google.maps.GeocoderStatus.OK) {
                    //map.setCenter(results[0].geometery.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometery.location
                    });
                    //marker.setPosition(results[0].geometery.location);
                    //marker.setMap(map);
                } else {
                    alert('Error: ' + status);
                }
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <script language="JavaScript" type="text/javascript">
        $(document).ready(function() {
            if (!navigator.geolocation) return;
            navigator.geolocation.getCurrentPosition(function(pos) {
                geocoder = new google.maps.Geocoder();
                var latlng = new google.maps.LatLng(pos.coords.latitude,
                    pos.coords.longitude);
                geocoder.geocode({
                    'latLng': latlng
                }, function(results, status) {
                    if (status === google.maps.GeocoderStatus.OK) {
                        $("#address").text(results[0].formatted_address);
                    }
                });
            });
        });
    </script>
</head>

<body>
    <div class="nav">
        <a href="home.jsp">Home</a> | <a href="Logout">Log Out</a>
    </div>

    <p>Welcome eric</p>

    <div id="googleMap" style="width:750px;height:500px;"></div><br>
    You are currently located at

    <div id="address" style="font-weight: bold;"></div><br>
    Enter Destination Address:

    <form>
        <input id="destaddress" size="100" type="text"> <input onclick=
        "codeAddress()" type="button" value="Go"> 
    </form>
</body>
</html>

此 .jsp 页面显示位于用户当前地址的 Google map ，并使用 API 的反向地理编码器显示用户当前地址。

我还尝试允许用户按地址搜索(使用常规地理编码器)，以在页面上显示的 map 上放置目的地标记。

我已经查看了几个这样的示例，但由于某种原因，我不断收到错误消息:Uncaught ReferenceError:系统未定义

根据错误控制台，此错误指向行 codeAddress home.jsp:73 和 onclick home.jsp:117。

我已经搜索了一段时间，但找不到类似错误的任何结果。

关于如何解决这个问题有什么想法吗？

最佳答案

错误是您在 JSP 中使用没有 scriptlet 标记的 java 代码。由于生成的 HTML System 中的这一点被解释为 JavaScript 对象，从而导致错误。

这是你的错误:

function codeAddress() {
    var addr = document.getElementById('destaddress').value;
    System.out.println(addr); // your error are here

    // ...
}

如果你想在浏览器控制台中显示addr的值，请像这样使用:

function codeAddress() {
    var addr = document.getElementById('destaddress').value;
    console.log(addr);

    // ...
}

即便如此，之后您仍会看到其他错误。例如，geo 也是未定义的。

下面的代码应该可以工作:

var map;
var geo = new google.maps.Geocoder();

function initialize() {
    var mapOptions = {
        zoom: 13
    };
    map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var infowindow = new google.maps.InfoWindow({
                map: map,
                position: pos,
                content: 'Current Location'
            });
            map.setCenter(pos);
        }, function() {
            handleNoGeolocation(true);
        });
    } else {
        handleNoGeolocation(false);
    }
}

function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
        var content = 'Error: The Geolocation service failed.';
    } else {
        var content = 'Error: Your browser doesn\'t support geolocation.';
    }
    var options = {
        map: map,
        position: new google.maps.LatLng(60, 105),
        content: content
    };
    var infowindow = new google.maps.InfoWindow(options);
    map.setCenter(options.position);
}

function codeAddress() {
    var addr = document.getElementById('destaddress').value;
    console.log(addr);
    geo.geocode({
        'address': addr
    }, function(results, status) {
        console.log(status);
        if (status === google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
        } else {
            alert('Error: ' + status);
        }
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

关于javascript - Google map API 有错误 "uncaught referenceerror: system is not defined"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29641422/

30 4 0
文章推荐： javascript - 如何使 "add new record"将字段表示为复选框 - Kendo Grid
文章推荐： javascript - 停止加载页面元素
文章推荐： reactjs - 位置为 : relative? 的 TransitionGroup/CSSTransition
文章推荐： javascript - 是否可以使用javascript将背景图像设置为用户电脑上的图像？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com