NG-包括未在其

使用JavaScript的HTML这是我的HTML代码的JavaScriptNG-包括未在其

<!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>

我在的地方，其中呼吁点击事件的各种意见有角的应用程序一起，它是处理从$locationprovider和$routeprovider从一个单一的js文件控制器和所有。

现在的问题是，当我试图在其中一个视图中使用ng-include功能时，它无法正常工作。文本框是可见的，但地图不是。我甚至尝试使用onload的东西来初始化函数，这是我原来的HTML页面，但仍然无法正常工作。

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

当JavaScript的部分无法使用谷歌地图脚本发生。

选中此有关错误信息：Reference Error - StackOverflow Question

NG-包括代码

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

请让我知道我必须做的整治。

谢谢你的时间。如果您需要我的更多说明，请让我知道。

来源

2016-02-12 Gandalf the White

ng-include不是iframe的替代品。它是为了在其他模板中添加模板来实现角度，这可能包括对实际角码的调用。您正在试图将整个html页面，head标签和所有其他页面包含到另一个页面中，这不仅仅是无效的html，而且除非在iframe元素中进行，否则也是毫无意义的。

我建议你将你的代码重构成google maps角度指令。

来源

2016-02-12 15:27:52 SirDemon

感谢您的回复@SirDemon。我确实在官方网站上阅读过有关ng-include的文档，并且我意识到这个事实，也就是为什么我发布了相同的问题。我很确定很多人会喜欢在某个时间点做类似的事情。我正在从Stackoverflow上的源代码收集的建议，我会用results.Cheers更新这个线程！ –

NG-包括未在其

回答

相关问题