[英]How to add google map with multiple marker using ionic framework/
I tried to display the map with multiple marker but there is always a white screen appear.I have attached my complete code below. 我试图显示带有多个标记的地图,但始终出现白屏。我在下面附加了完整的代码。 please let me know where I am wrong.if i add the sipmle map then it integrate successfully but if i tried to add map with multiple markers it display white screen.
请让我知道我错了。如果我添加了sipmle地图,那么它可以成功集成,但是如果我尝试添加带有多个标记的地图,它将显示白屏。
CONTROLLERS.JS
var cities = [
{
city : 'chandigarh',
desc : 'Test',
lat : 52.238983,
long : -0.888509
},
{
city : 'chennai',
desc : 'Test',
lat : 52.238168,
long : -52.238168
},
];
.controller('MapCltrl', function($scope,$http,$window, $ionicLoading, $compile,$ionicLoading) {
// Map Settings //
$scope.initialize = function() {
var latitude;
var longitude;
var myLatlng = new google.maps.LatLng(30.444,
76.435);
var mapOptions = {
center : myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom : 8,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map1"), mapOptions);
// Geo Location /
navigator.geolocation.getCurrentPosition(function(pos) {
map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
var myLocation = new google.maps.Marker({
position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
map: map,
animation: google.maps.Animation.DROP,
title: "My Location"
});
});
$scope.map = map;
// Additional Markers FOR THE DIFFERENT CITIES//
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow();
var createMarker = function (info){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(info.lat, info.long),
map: $scope.map,
animation: google.maps.Animation.DROP,
title: info.city
});
marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';
google.maps.event.addListener(marker, 'click', function(){
infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
// FOR LOOP TO ARRAY OF CITIES
for (i = 0; i < cities.length; i++){
createMarker(cities[i]);
}
};
google.maps.event.addDomListener(document.getElementById("map1"), 'load', $scope.initialize());
});
here is my citiesmap.html 这是我的citymap.html
.state('auth.citiesmaps', {
url : '/citiesmaps',
views : {
'menuContent' : {
templateUrl : 'templates/auth-citiesmaps.html',
controller : 'MapCltrl'
}
}
})
here is my app.js 这是我的app.js
06-25 16:13:09.395: E/Web Console(14997): Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
06-25 16:13:09.395: E/Web Console(14997): Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
06-25 16:13:09.395: E/Web Console(14997): Error: [$injector:nomod] Module 'starter.controllers' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
06-25 16:13:09.395: E/Web Console(14997): http://errors.angularjs.org/1.3.6/$injector/nomod?p0=starter.controllers
06-25 16:13:09.395: E/Web Console(14997): at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:7888:12
06-25 16:13:09.395: E/Web Console(14997): at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:9576:17
06-25 16:13:09.395: E/Web Console(14997): at ensure (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:9500:38)
06-25 16:13:09.395: E/Web Console(14997): at module (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:9574:14)
06-25 16:13:09.395: E/Web Console(14997): at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11906:22
06-25 16:13:09.395: E/Web Console(14997): at forEach (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:8147:20)
06-25 16:13:09.395: E/Web Console(14997): at loadModules (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11890:5)
06-25 16:13:09.395: E/Web Console(14997): at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11907:40
06-25 16:13:09.395: E/Web Console(14997): at forEach (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:8147:20)
06-25 16:13:09.395: E/Web Console(14997): at loadModules (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11890:5)
here is my log error: 这是我的日志错误:
06-25 16:13:09.395: E/Web Console(14997): Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to: 06-25 16:13:09.395: E/Web Console(14997): Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to: 06-25 16:13:09.395: E/Web Console(14997): Error: [$injector:nomod] Module 'starter.controllers' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. 06-25 16:13:09.395: E/Web Console(14997): http://errors.angularjs.org/1.3.6/$injector/nomod?p0=starter.controllers 06-25 16:13:09.395: E/Web Console(14997): at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:7888:12 06-25 16:13:09.395: E/Web Console(14997): at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:9576:17 06-25 16:13:09.395: E/Web Console(14997): at ensure (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:9500:38) 06-25 16:13:09.395: E/Web Console(14997): at module (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:9574:14) 06-25 16:13:09.395: E/Web Console(14997): at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11906:22 06-25 16:13:09.395: E/Web Console(14997): at forEach (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:8147:20) 06-25 16:13:09.395: E/Web Console(14997): at loadModules (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11890:5) 06-25 16:13:09.395: E/Web Console(14997): at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11907:40 06-25 16:13:09.395: E/Web Console(14997): at forEach (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:8147:20) 06-25 16:13:09.395: E/Web Console(14997): at loadModules (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11890:5)
here is my code for google maps with multiple markers which is working .i get list of lattitude and longitudes. 这是我的带有多个标记的google地图的代码,该代码可以正常工作。我会获取经度和纬度列表。
var position = new google.maps.LatLng(lattitude,longitude);
var content = email+","city;
var marker = new google.maps.Marker({
position:position,
map:map,
content:content,
email:email
});
if(email == undefined || email == "")
marker.setIcon('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_gray.png');
else
marker.setIcon('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png');
window.gmap_marker_list.push(marker);
You can use a "for" to do that. 您可以使用“ for”来做到这一点。 For example:
例如:
google.maps.event.addListener($scope.map, 'idle', function() { google.maps.event.addListener($ scope.map,'idle',function(){
var marker;
for (var i = 0; i < localizacion.length; i++) {
var latitud = localizacion[i].lat;
var longitud = localizacion[i].long;
var latLng = new google.maps.LatLng(latitud, longitud);
marker = new google.maps.Marker({
map: $scope.map,
position: latLng
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.