Angular js地图集成

Angular js Map integration

本文关键字:集成 地图集 地图 js Angular      更新时间:2023-09-26

我是angular js的新手。现在我正在研究谷歌地图。我有一个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>

如果你是AngularJS的新手,将一些JavaScript代码转换为AngularJS有时是相当困难的,特别是如果你使用谷歌地图。

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

这里有Angular谷歌地图的链接,或者Angularjs-Google-Maps插件。