我正在尝试添加一个 Google map 应用程序,为用户提供从他/她当前位置到 map 上特定固定静态点的方向。到目前为止我已经创建了一个 Controller 和相关的 HTML。然而,由于某种原因,当我测试这个时,我没有得到 map ,而是控制台中出现错误“”
这是我的 Controller :
'use strict';
angular.module('main')
.controller('LocationCtrl', function($scope, $ionicLoading, $compile) {
function initialize() {
google.maps.event.addDomListener(window, 'load');
var myLatlng = new google.maps.LatLng(43.07493, -89.381388);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
$scope.map = map;
}
function loadScript(src) {
var script = document.createElement("script");
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
script.src = src;
}
loadScript('http://www.google.com.mt/jsapi');
loadScript('http://maps.googleapis.com/maps/api/js?key=&v=3&sensor=true&callback=initialize');
$scope.centerOnMe = function() {
if (!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting location',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function(pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function(error) {
alert('Unable to get location: ' + error.message);
});
};
$scope.clickTest = function() {
alert('Example of infowindow with ng-click')
};
});
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ion-pane>
<ion-header-bar class="bar-dark">
<button ui-sref="main" class="button button-icon icon ion-navicon"></button>
<h1 class="title">Directions</h1>
</ion-header-bar>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
<ion-footer-bar class="bar-dark">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
</ion-footer-bar>
</ion-pane>
有人可以告诉我我做错了什么吗?另外,有人可以给我一些提示,告诉我如何在用户单击页脚中的“查找我”链接时向用户提供到达此静态点的方向吗? (沿着这些思路,但终点是固定的,起点是用户单击“查找我”按钮时的位置 - https://developers.google.com/maps/documentation/javascript/examples/directions-panel)
我是 AngularJS 新手,不确定我的代码是否正确。另外,我没有使用 jQuery 作为依赖项。
最佳答案
尝试与 Angular Google map 集成 http://angular-ui.github.io/angular-google-maps/#!/
它更容易使用并且有很好的文档。
关于javascript - 将 Google map 添加到 AngularJS 和 Ionic 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29832416/