个人中心
gpt4 book ai didi

javascript - ng-include 不适用于其中包含 javascript 的 html

转载 作者：行者123 更新时间：2023-11-27 23:21:01 25 4
gpt4 key购买 nike

这是我的 HTML 代码以及 javascript 

<!DOCTYPE html>
<html>
<head lang="en">
    <style>
        #map-canvas {
            height:400px;
            width:600px;
        }
        .controls {
            margin-top: 16px;
            border: 1px solid transparent;
            border-radius: 2px 0 0 2px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            height: 32px;
            outline: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }
        #pac-input {
            background-color: #fff;
            padding: 0 11px 0 13px;
            width: 400px;
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
            text-overflow: ellipsis;
        }
        #pac-input:focus {
            border-color: #4d90fe;
            margin-left: -1px;
            padding-left: 14px;
            /* Regular padding-left + 1. */
            width: 401px;
        }
        .pac-container {
            font-family: Roboto;
        }
        #type-selector {
            color: #fff;
            background-color: #4d90fe;
            padding: 5px 11px 0px 11px;
        }
        #type-selector label {
            font-family: Roboto;
            font-size: 13px;
            font-weight: 300;
        }
    </style>

    <script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
    <script type="text/javascript">

        var map;
        function initialize() {

            var markers = [];
            var map = new google.maps.Map(document.getElementById('map-canvas'), {
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var defaultBounds = new google.maps.LatLngBounds(
                    new google.maps.LatLng(-33.8902, 151.1759),
                    new google.maps.LatLng(-33.8474, 151.2631));
            map.fitBounds(defaultBounds);

            // Create the search box and link it to the UI element.
            var input = /** @type {HTMLInputElement} */
                    (
                            document.getElementById('pac-input'));
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

            var searchBox = new google.maps.places.SearchBox(
                    /** @type {HTMLInputElement} */ (input));

            // Listen for the event fired when the user selects an item from the
            // pick list. Retrieve the matching places for that item.
            google.maps.event.addListener(searchBox, 'places_changed', function () {

                var places = searchBox.getPlaces();

                for (var i = 0, marker; marker = markers[i]; i++) {
                    marker.setMap(null);
                }

                markers = [];
                var bounds = new google.maps.LatLngBounds();

                for (var i = 0, place; place = places[i]; i++) {

                    // Create a marker for each place.
                    var marker = new google.maps.Marker({
                        map: map,
                        title: place.name,
                        position: place.geometry.location
                    });

                    markers.push(marker);

                    bounds.extend(place.geometry.location);
                }

                map.fitBounds(bounds);
            });

            google.maps.event.addListener(map, 'click', function(event) {
                var myLatLng = event.latLng;
                var lat = myLatLng.lat();
                var lng = myLatLng.lng();
                var x = 'Latitude is =' + lat + 'Longitude is=' + lng;
                var TheTextBox = document.getElementById("lat");
                TheTextBox.value = lat;
                var TheTextBox1 = document.getElementById("long");
                TheTextBox1.value = lng;
                // alert(x);
            });
        }
        google.maps.event.addDomListener(window, "load", initialize);
    </script>
</head>
<body>
<div id="map-canvas"></div>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<input type="text" name="lat" id="lat">
<input type="text" name="long" id="long">

</body>
</html>

我有一个 Angular 应用程序，它在点击事件上调用各种 View ，并且由 $locationprovider 和 $routeprovider 从一个 js 文件处理 Controller 和所有内容。

现在的问题是，当我尝试在其中一个 View 中使用 ng-include 功能时，它无法正常工作。文本框可见，但 map 不可见。我什至尝试使用 onload 来再次初始化该函数，该函数位于我的原始 HTML 页面中，但仍然不起作用。

控制台上的错误是 - ReferenceError: google is not Defined

当 javascript 部分无法使用谷歌地图脚本时会发生这种情况。

检查此错误信息:Reference Error - StackOverflow Question

ng-包含代码

        <ng-include
        src="'testmap.html'"
        [onload="initialize();"]
        >
        </ng-include>

请让我知道我必须采取什么措施来纠正这个问题。

感谢您的宝贵时间。如果您需要我方面的更多说明，请告诉我。

最佳答案

ng-include 不是 iframe 的替代品。它的目的是在其他 Angular 模板中添加模板，其中可能包括对实际 Angular 代码的调用。您试图将整个 html 页面、head 标签和所有内容包含到另一个页面中，这不仅是无效的 html，而且除非您在 iframe 元素内执行此操作，否则毫无意义。

我建议您将代码重构为谷歌地图 Angular Directive(指令)。

关于javascript - ng-include 不适用于其中包含 javascript 的 html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35360698/

25 4 0
文章推荐： javascript - 单击按钮时将光标置于文本区域中的 2 个点之间
文章推荐： css - 为什么 CSS 规则不应用于嵌入的 SVG 符号？
文章推荐： css - 使用 React 水平滚动和垂直滚动
文章推荐： javascript - Owl Carousel 幻灯片中的元素在 css 动画发生之前显示
行者123
个人简介

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

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