Angular js地图集成答案

【问题标题】：Angular js Map integrationAngular js地图集成
【发布时间】：2015-07-07 21:42:12
【问题描述】：

我是 Angular js 的新手。现在我正在研究 Angular 谷歌地图。我有一个 javascript 代码。我希望它转换成角度 js。谁能帮帮我。提前谢谢..

这是我的 html 代码：-

<div id="map-canvas"></div>

      <div class="modal fade" id="geoTagConfirmationModal">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Geo Tag</h4>
              </div>
              <div class="modal-body">
                <p>Do you want to geotag at this place?&hellip;</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" >No</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="doGeoTagging()">Yes</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

这是我的 javascript 代码..

<script>
        var geocoder;
        var map;
        var infowindow = new google.maps.InfoWindow();
        var currPosition;
        var geoCodeResults;

        function initialize() {
          geocoder = new google.maps.Geocoder();
          var latlng = new google.maps.LatLng(40.730885,-73.997383);
          var mapOptions = {
            zoom: 18,
            center: latlng,
            mapTypeId: 'roadmap'
          }
          map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
          google.maps.event.addListener(map, 'click', function(e) {
                codeLatLng(e.latLng, map);
          });
        }

        function codeLatLng(position,map) {
            geocoder.geocode({'latLng': position}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                  if (results[1]) {
                    geoCodeResults=results[0];
                    currPosition=position;
                    $('#geoTagConfirmationModal').modal('toggle');
                  } else {
                    alert('No results found');
                  }
                } else {
                  alert('Geocoder failed due to: ' + status);
                }
              });
        }

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

        function doGeoTagging(){
            //map.setZoom(11);
            var marker = new google.maps.Marker({
                position: currPosition,
                map: map
            });
            //infowindow.setContent(results[1].formatted_address);
            infowindow.setContent("Geotagging done at "+geoCodeResults.formatted_address+"!");
            infowindow.open(map, marker);
            return true;
        }

    </script>

【问题讨论】：

那么，您遇到的实际问题是什么？

标签： javascript html angularjs

【解决方案1】：

如果您是 AngularJS 的新手，将一些 JavaScript 代码转换为 AngularJS 有时会非常困难，特别是如果您使用 Google 地图。

我建议你使用现有的插件，也许检查一下它是如何制作的:)

Angular Google Maps 或 Angularjs-Google-Maps 插件的链接在这里。

【讨论】：