Angular js地图集成
Angular js Map integration
我是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">×</span></button>
<h4 class="modal-title">Geo Tag</h4>
</div>
<div class="modal-body">
<p>Do you want to geotag at this place?…</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插件。
相关文章:
- 如何检测用于WebGL的专用或集成显卡
- 在我的SPA应用程序中集成Facebook共享的问题
- vaadin:使用自定义布局集成angular js
- React ajax数据集成
- 有没有一个抽象层,这样我就可以集成一次,然后使用pusher、pubnub或faye
- IE中关于ZK和JavaScript集成的一些错误
- 如何将拼写检查集成到密文编辑器
- 将外部文件与AngularJs集成
- 如何将tesseract OCR与Cordova/Phonegap应用程序集成
- Cordova Facebook登录集成cordovaOauth
- 如何在Angular js中集成其他页面中的样式
- 性能与模块化:将JS集成到PHP或单独的custom.JS中
- Meteor集成测试,在velocity'她的镜子上有茉莉花
- Okta与JavaScript的集成
- 将prettyPhoto集成到Wordpress主题中
- 将epub.js集成到firefox中,作为.epub的默认读取器
- 在Meteor:p5.AudioIn()中集成p5.sound.js不是构造函数
- 如何将现有的angular js应用程序集成到Laravel 5中
- 如何将FBjavascript API与我的后台集成
- 将Laravel5.0中的谷歌图表与mysql数据库中的数据集成