1
我的問題是,當我用谷歌地圖加載屏幕時,地圖不顯示。首先刷新後。什麼是我的錯誤,或者我該如何防止這種情況?如何以角度重新加載視圖。谷歌地圖API
.controller('LocationsCtrl', function($scope, $http, $timeout) {
$scope.ini = function() {
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var mapProp = {
center: new google.maps.LatLng(52.4550, -3.3833),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
$.getJSON("https://onepicture.ch/locations.php", function(json1) {
$.each(json1.stores, function (key, data) {
var latLng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: latLng,
title: data.title,
map: map
// icon: icon,
});
var details = "<b>" + data.title + "<b><br> " +data.address + "<br> " + data.city + "<br>";
bindInfoWindow(marker, map, infowindow, details);
});
});
}
function bindInfoWindow(marker, map, infowindow, strDescription) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(strDescription);
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
}
})
標記:
<ion-view ng-init="ini()">
<ion-header-bar class="banner-top ext-box" align-title="left">
<div class="int-box2"><h2 id="s_back1">MAP</h2></div>
</ion-header-bar>
<ion-content overflow-scroll="true" class="has-header has-footer" scroll="false" >
<div style="height:100%; width:100%;">
<div id="map"></div>
</div>
</ion-content>
<ion-footer-bar class="bar-bottom" align-title="left">
<ul>
<a href="#/home" nav-transition="none"><li><img src="img/home.png" class="img-left" alt=""></li></a>
<a href="#/list" nav-transition="none"><li><img src="img/list.png" class="img-left"alt=""></li></a>
<a href="#/map" nav-transition="none"><li><img src="img/map_de.png" class="img-left"alt=""></li></a>
<a href="#/info" nav-transition="none"><li><img src="img/info.png" class="img-left"alt=""></li></a>
<a href="#/tapsi" nav-transition="none"><li><img src="img/tapsy.png" class="img-left"alt=""></li></a>
</ul>
</ion-footer-bar>
</ion-view>