Question

我最近开始在Firefox中测试我的JavaScript，最初我在使用chrome。

这部分代码在chrome中运行良好：

geocoder = new google.maps.Geocoder();

然而在Firefox中引发了上述错误，为什么会这样？ Firefox有什么额外的考虑因素吗？

下面是我的JS和aspx代码

var map;
var placesService;
var geocoder;


function loadMap() {

    $("#map-canvas").ready(function () {
        alert("ready");

        geocoder = new google.maps.Geocoder();
        alert("1");

        map = new google.maps.Map(document.getElementById('map-canvas'),
            {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 12
            });
        alert("2");

        placesService = new google.maps.places.PlacesService(map);
        alert("3");

        $('#control').hide();
        $('#errorLog').hide(); // the error log text box would cause the map to only display half the tiles, delaying the showing of these elements stopped that.
        alert("4");

        google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
            alert("5");
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById("control"));
            map.controls[google.maps.ControlPosition.RIGHT].push(document.getElementById("errorLog"));
            $('#control').show();
            $('#errorLog').show();
            alert("6");
        });

        alert("7");




        $('#locateTown').click(function () { locateTown(); });
        $('#scanTown').click(function () { scanTownStart(); });
        $('#newSearch').click(function () { backToSearch() });
        $('.scanTown').hide();
        $('.info').hide();
        alert("8");

    })
}

<!DOCTYPE html>

<html lang="en">
    <head runat="server">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
        <title>Title</title>

        <asp:PlaceHolder runat="server">
            <%: Scripts.Render("~/bundles/modernizr") %>
        </asp:PlaceHolder>

        <webopt:bundlereference runat="server" path="~/Content/css" />
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    </head>
    <body>
        
        <form runat="server">
            <asp:ScriptManager runat="server" EnablePartialRendering="true">
                <Scripts>
                    <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                    <%--Framework Scripts--%>
                    <asp:ScriptReference Name="MsAjaxBundle" />
                    <asp:ScriptReference Name="jquery" />
                    <asp:ScriptReference Name="respond" />
                    <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                    <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                    <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                    <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                    <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                    <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                    <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                    <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                    <asp:ScriptReference Name="WebFormsBundle" />
                    <%--Site Scripts--%>
                    <asp:ScriptReference Path="~/bundles/Page" />
                    <asp:ScriptReference Path="~/bundles/Utils" />
                    <asp:ScriptReference Path="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjcLgEOEkdQfwxEyGOu4hHlSY_s-LOGkQ" />
                    <asp:ScriptReference Path="https://maps.googleapis.com/maps/api/js?libraries=places" />
                </Scripts>
            </asp:ScriptManager>

            <div class="fill flex-container flex-column">
                <asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="always">
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="uploadResults" EventName="Click" />
                    </Triggers>
                    <ContentTemplate>
                        <div id="control" style="margin-top:0.3%">
                            <input type="text" id="towntoSearch" class="locateTown" value="Hatfield" />
                            <input type="button" id="locateTown" class="locateTown" value="Locate Town" />
                            <select id="selectedTown" class="scanTown" ></select> 
                            <input type="button" id="scanTown" class="scanTown" value="Scan Town" />
                            <input type="button" id="newSearch" class="scanTown" value="Search Again" />
                            <input type="text" readonly id="infoDisplay" class="info" />
                            <asp:Button runat="server" ID="uploadResults" OnClick="uploadResults_Click" ClientIDMode="Static" Text="Upload" CssClass="hidden" />
                        </div>
                        <div id="errorLog" style="margin-top:0.3%; margin-right:0.3%">
                            <textarea cols="20" rows="25" id="errorText"></textarea>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>

                <div class="flex-1" id="map-canvas">MAP</div>
    

    
            </div>



        </form>

    </body>
</html>

Answer 1

您收到此错误是因为您要加载Google Maps API两次会导致冲突。你应该在你的控制台中看到它。

所以只需使用您想要的库添加API一次：

<asp:ScriptReference Path="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjcLgEOEkdQfwxEyGOu4hHlSY_s-LOGkQ&libraries=places" />

为什么firefox抛出错误google.maps.geocoder不是构造函数？

1 个答案: