地图标记后灰色瓷砖在谷歌地图应用于Angularjs [英] Grey Tile after Map Marker applied in Google map in Angularjs
问题描述
使用角谷歌，地图1.0.18
该地图加载完全正常，问题上升一个标记添加。包含标记广场变成灰色在地图上。我已经使用在其他的问题建议以及解决方案的尝试。但它是使没有差别。如何任何线索来解决这个问题。
<一个href=\"http://stackoverflow.com/questions/8812268/grey-boxes-appear-in-parts-of-embedded-google-map-in-modal-box?lq=1\">Grey框出现在模式对话框嵌入谷歌地图的部分
code，以供参考：
VAR城市= [
{
城市：多伦多，
说明：这是世界上最好的城市！，
纬度：43.7000，
长：-79.4000
}，
{
城市：'纽约'，
说明：这个城市是aiiiiite！，
纬度：40.6700，
长：-73.9400
}，
{
城市：芝加哥，
说明：这是世界上第二个最好的城市！，
纬度：41.8819，
长：-87.6278
}，
{
城市：洛杉矶，
说明：这个城市是活！，
纬度：34.0500，
长：-118.2500
}，
{
城市：拉斯维加斯，
说明：罪恶之城...... \\'纳夫说'！
纬度：28.65596033103927，
长：77.2226215342037
}
]; VAR的MapOptions = {
变焦：4，
中心：新google.maps.LatLng（40.0000，-98.0000），
mapTypeId设为：google.maps.MapTypeId.TERRAIN
} $ scope.map =新google.maps.Map（的document.getElementById（地图），的MapOptions）;
的console.log（$ scope.map）; $ scope.markers = []; VAR信息窗口=新google.maps.InfoWindow（）; VAR createMarker =功能（信息）{ VAR的标记=新google.maps.Marker（{
图：$ scope.map，
位置：新google.maps.LatLng（info.lat，info.long）
标题：info.city
}）;
marker.content ='＆LT; DIV CLASS =infoWindowContent＆GT;' + info.desc +'＆LT; / DIV＆GT;'; google.maps.event.addListener（标记，'点击'，功能（）{
infoWindow.setContent（'＆LT; H2＆GT;'+ marker.title +'＆LT; / H＆GT;'+ marker.content）;
infoWindow.open（$ scope.map，标记）;
}）; google.maps.event.trigger（$ scope.map，调整）;
//$scope.map.setCenter(new google.maps.LatLng（22.3605336，-72.6362989））; $ scope.markers.push（标记）; //google.maps.event.trigger($scope.map，调整）; } 对于（i = 0; I＆LT; cities.length;我++）{
createMarker（城市由[i]）;
} $ scope.openInfoWindow =功能（即selectedMarker）{
亦即preventDefault（）;
google.maps.event.trigger（selectedMarker，'点击'）;
}
HTML
＆LT; DIV＆GT;
＆LT; DIV ID =地图＆GT;＆LT; / DIV＆GT;
＆LT; DIV ID =下课NG-重复=在标记标记|排序依据：'标题'＆GT;
＆LT; A HREF =＃NG点击=的openInfoWindow（$事件标记）＆GT; {{marker.title}}＆LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
我们有这个问题，它看起来酷似OP的屏幕截图。
对于我们来说，问题是，我们使用它需要我们CSS样式应用到画布如下一个JavaScript库被称为悬浮窗：
帆布{
-moz-箱阴影：的3px的3px的3px 0＃e3e3e3;
-webkit-箱阴影：的3px的3px的3px 0＃e3e3e3;
背景颜色：＃f3f3f3;
边框：1px的固体＃c3c3c3;
箱阴影：的3px的3px的3px 0＃e3e3e3;
高度：100像素;
保证金：6像素0 0 6个像素;
}
这造型是无意中被应用到谷歌地图的画布，这是造成灰箱出现时添加标记在地图上。
删除这将适用于所有的'画布'的元素和使用类/ id选择，而不是适当的，这样你就不会无意中样式应用到您的谷歌地图的画布任何造型。
Using angular-google-maps 1.0.18 The map loads perfectly fine, problem rises a marker is added. A square containing the marker turns grey in the map. I have tried using solutions suggested in another questions as well. But it is making no difference. Any clues to how to resolve this.
Grey boxes appear in parts of embedded Google Map in modal box
Code for reference :
var cities = [
{
city : 'Toronto',
desc : 'This is the best city in the world!',
lat : 43.7000,
long : -79.4000
},
{
city : 'New York',
desc : 'This city is aiiiiite!',
lat : 40.6700,
long : -73.9400
},
{
city : 'Chicago',
desc : 'This is the second best city in the world!',
lat : 41.8819,
long : -87.6278
},
{
city : 'Los Angeles',
desc : 'This city is live!',
lat : 34.0500,
long : -118.2500
},
{
city : 'Las Vegas',
desc : 'Sin City...\'nuff said!',
lat : 28.65596033103927,
long : 77.2226215342037
}
];
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
console.log($scope.map);
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow();
var createMarker = function (info){
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
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);
});
google.maps.event.trigger($scope.map, 'resize');
//$scope.map.setCenter(new google.maps.LatLng(22.3605336, -72.6362989));
$scope.markers.push(marker);
//google.maps.event.trigger($scope.map, 'resize');
}
for (i = 0; i < cities.length; i++){
createMarker(cities[i]);
}
$scope.openInfoWindow = function(e, selectedMarker){
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
HTML :
<div>
<div id="map"></div>
<div id="class" ng-repeat="marker in markers | orderBy : 'title'">
<a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a>
</div>
</div>
We had this issue, which looked exactly like the OP's screenshot.
The issue for us was that we were using a javascript library called dropzone which required us to apply CSS styling to 'canvas' as follows:
canvas {
-moz-box-shadow: 3px 3px 3px 0 #e3e3e3;
-webkit-box-shadow: 3px 3px 3px 0 #e3e3e3;
background-color: #f3f3f3;
border: 1px solid #c3c3c3;
box-shadow: 3px 3px 3px 0 #e3e3e3;
height: 100px;
margin: 6px 0 0 6px;
}
This styling was inadvertently being applied to the Google Map canvas, which was causing the 'grey box' to appear on the map when a marker was added.
Remove any styling which would apply to all 'canvas' elements and use a class/id selector instead as appropriate so that you don't inadvertently apply the style to your Google Map canvas.
这篇关于地图标记后灰色瓷砖在谷歌地图应用于Angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
