Виртуальная земля - только карта не рендерит
Я сталкиваюсь с этой странной проблемой. bing map
не отображается на моей странице, где, как все элементы управления, даже pushpins
отображается правильно.
Я много гуглил и та же функциональность отлично работает в других моих проектах
Я подозреваю, что что-то не так со ссылкой на dev.virtualearth.net, или я что-то упускаю
Вот мой код: ASCX (находится внутри заполнителя содержимого динамически генерируемого aspx):
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=de-de">
</script>
<div>
.
.
.
<div id="bigMapContainer">
<div id="eventMap">
</div>
</div>
</div>
Код позади:
string script = @"
function GetVEMap() {
map = new VEMap('eventMap');
map.SetDashboardSize(VEDashboardSize.Small);
map.LoadMap();
DisplayEventsOnMap();
}
function DisplayEventsOnMap() {
var eventMapLayer = new VEShapeLayer();
eventMapLayer.Id = 'eventMapLayer';
var points = null;
.
.
.
//Code to get the data for pin display etc
.
.
map.AddShapeLayer(eventMapLayer);
map.SetMapView(eventMapLayer.GetBoundingRectangle());
map.SetZoomLevel(15);
});
}
$(window).load(function() {
GetVEMap();
}
);";
ScriptManager.RegisterStartupScript(this, typeof(Page), "MapDisplay", script, true);
CSS:
#bigMapContainer {display: block;}
#eventMap { position: absolute; width: 550px height: 500px; }
Я добавил несколько ссылок на главные страницы, которые не связаны с картой, но могут конфликтовать с моей реализацией карты (?)
<script type="text/javascript" src="/js/modernizr-2.0.6.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
<script type="text/javascript" src="/js/superfish.js"></script>
<script type="text/javascript" src="/js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.totop.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.responsivemenu.js"></script>
<script type="text/javascript" src="/js/client.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
Помощь очень ценится.
2 ответа
После огромного исследования я обнаружил, что проблема была с CSS. Спасибо @rbrunditt за помощь
mapcontrol.css
внутри http://ecn.dev.virtualearth.net/mapcontrol/v6.3/css/bin/6.3.20091207154938.04/de/mapcontrol.css есть класс для контейнера контейнера - .MSVE_Map
которые имеют атрибут position:absolute
который заставлял плитки показываться из экрана.
Я переопределил класс, чтобы position:relative
который на самом деле решил проблему..
Во-первых, похоже, что вы указываете на Virtual Earth 6.2, которая устарела несколько лет назад, а теперь указывает на v6.3. Тем не менее, v6.3 действительно старый и не рекомендуется для новых проектов разработки. Если это новый проект, вы должны использовать Bing Maps V7, которая является последней и лучшей версией Bing Maps (Virtual Earth была переименована в Bing Maps в 2009 году). V7 намного быстрее, имеет гораздо больше функций, а также намного меньше.
Предполагая, что это существующий проект, который только что начал иметь проблемы. Глядя на ваш код, сразу замечаю, что при загрузке карты не указываются учетные данные. Это обязательно. Прямо перед вызовом метода LoadMap у вас должна быть строка кода, подобная этой:
map.SetCredentials('YOUR_BING_MAPS_KEY');
Если у вас нет ключа Bing Maps, вы можете получить его, создав учетную запись Bing Maps на портале Bing Maps: http://bingmapsportal.com/ Вот некоторая документация по созданию ключа: http://msdn.microsoft.com/en-us/library/ff428642.aspx
Далее, div EventMap, вы указываете какие-либо стили для этого? Он должен иметь позицию, ширину и высоту, указанную либо как класс CSS, либо как встроенный стиль. Без этого вы получите странный рендеринг в некоторых браузерах.