Yandex Maps Api 示例不起作用答案

【问题标题】：Yandex Maps Api example doesn't workYandex Maps Api 示例不起作用
【发布时间】：2015-02-13 01:37:05
【问题描述】：

我想在伊斯坦布尔的两点之间找到一条路线。为此，我尝试运行取自this guide 的简单代码。但是这段代码不起作用。我无法查看路线路径或地图。我的代码在这里。

<title>Quick start. Publishing an interactive map on a page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
<script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

    var ymap;
    ymaps.ready(function(){ 
        ymap = new ymaps.Map ("map", {
            center: [41.01771, 28.968484],
            zoom: 10,
            controls: ['zoomControl', 'typeSelector',
                       'geolocationControl', 'trafficControl',
                       'fullscreenControl'] 
        });

        ymaps.route([
            'Maltepe',
            'Kartal'
        ]).then(function (route){
            ymap.geoObjects.add(route);
            }, function(error){
               alert("Ошибка. " + error.status +
                     ":" + error.message);
            }
        );

    });

</script>

【问题讨论】：

标签： javascript html yandex-api yandex-maps

【解决方案1】：

示例中的代码是正确的。这是需要修复的页面。您必须在页面的 HTML 中添加正确定位/大小的 DIV 元素。此元素的 id（“map”）作为第一个参数传递给构造函数 new ymaps.Map。

这是一个简约的 HTML 和 CSS 代码：

HTML

<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<div id="map"></div>

CSS：

body {
    height: 100%;
}
#map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

我为你创建了一个活生生的例子，见this fiddle

【讨论】：

http/https 问题。当我使用 http 作为 JS URI 时，JSFiddle 的“共享链接”给了我 https 链接。修复了指向 JSFiddle 的链接以正确指向 http。很抱歉。