Question

我在Google Maps API v2中使用Yandex地图图块（俄语），但在Google Maps API v3中无效，请参阅以下jsfiddle：http://jsfiddle.net/VkGjq/1/

请注意，在Google路线图和Yandex磁贴之间切换时，他们不会排队等待。标记处于错误的位置。

对于地图v2，我制作了一个等效的jsfiddle但由于它需要一个API密钥而被破坏了：http://jsfiddle.net/ggrgQ/1/

您可以在此处看到类似的代码，但由于Yandex在俄罗斯以外没有任何体面的数据，您必须手动导航到莫斯科：http://gpsloglabs.com/share/2367c16f3a0e75b05ac8a5529afba225dd929518/

我不记得我在哪里获得了v3代码，但常量似乎大致对应于v2版本。除此之外，我不明白投影是做什么的，所以我被卡住了。

有什么想法吗？

来自jsfiddle的代码如下：

var center = new google.maps.LatLng(55.75, 37.62);
var mapOptions = {
    zoom: 10,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);

new google.maps.Marker({map: map, position: center});

map.mapTypes.set("Yandex",
                 new google.maps.ImageMapType(
                     {getTileUrl: function(coord, zoom) {
                         return "http://vec0"+((coord.x+coord.y)%5)+".maps.yandex.net/tiles?l=map&v=2.16.0&x=" + 
                             coord.x + "&y=" + coord.y + "&z=" + zoom + "";
                     },
                      tileSize: new google.maps.Size(256, 256),
                      isPng: true,
                      alt: "Yandex",
                      name: "Yandex",
                      projection: new YandexProjection(),
                      maxZoom: 17}));

map.setOptions({mapTypeControlOptions: {mapTypeIds: [google.maps.MapTypeId.ROADMAP, "Yandex"]} });

function YandexProjection() {
    this.pixelOrigin_ = new google.maps.Point(128,128);
    var MERCATOR_RANGE = 256;
    this.pixelsPerLonDegree_ = MERCATOR_RANGE / 360;
    this.pixelsPerLonRadian_ = MERCATOR_RANGE / (2 * Math.PI);

    this.fromLatLngToPoint = function(latLng) {
        function atanh(x) {
            return 0.5*Math.log((1+x)/(1-x));
        }
        function degreesToRadians(deg) {
            return deg * (Math.PI / 180);
        }
        function bound(value, opt_min, opt_max) {
            if (opt_min != null) value = Math.max(value, opt_min);
            if (opt_max != null) value = Math.min(value, opt_max);
            return value;
        }

        var origin = this.pixelOrigin_;
        var exct = 0.0818197;
        var z = Math.sin(latLng.lat()/180*Math.PI);
        return new google.maps.Point(origin.x + latLng.lng() *this.pixelsPerLonDegree_,
                                     Math.abs(origin.y - this.pixelsPerLonRadian_*(atanh(z)-exct*atanh(exct*z))));
    };

    this.fromPointToLatLng = function(point) {
        var origin = this.pixelOrigin_;
        var lng = (point.x - origin.x) / this.pixelsPerLonDegree_;
        var latRadians = (point.y - origin.y) / -this.pixelsPerLonRadian_;
        var lat = Math.abs((2*Math.atan(Math.exp(latRadians))-Math.PI/2)*180/Math.PI);
        var Zu = lat/(180/Math.PI);
        var Zum1 = Zu+1;
        var exct = 0.0818197;
        var yy = -Math.abs(((point.y)-128));
        while (Math.abs(Zum1-Zu)>0.0000001){
        Zum1 = Zu;
        Zu = Math.asin(1-((1+Math.sin(Zum1))*Math.pow(1-exct*Math.sin(Zum1),exct))
                       / (Math.exp((2*yy)/-(256/(2*Math.PI)))*Math.pow(1+exct*Math.sin(Zum1),exct)));
        }
        if (point.y>256/2) {
            lat=-Zu*180/Math.PI;
        } else {
            lat=Zu*180/Math.PI;
        }
        return new google.maps.LatLng(lat, lng);
    };

    return this;
}

Answer 1

事实证明，projection属性不能通过ImageMapTypeOptions设置，并且必须在构造ImageMapType之后分配，此jsfiddle现在可以正常工作：{{3 }}

var yandexMapType = new google.maps.ImageMapType(
                     {getTileUrl: function(coord, zoom) {
                         return "http://vec0"+((coord.x+coord.y)%5)+".maps.yandex.net/tiles?l=map&v=2.16.0&x=" + 
                             coord.x + "&y=" + coord.y + "&z=" + zoom + "";
                     },
                      tileSize: new google.maps.Size(256, 256),
                      isPng: true,
                      alt: "Yandex",
                      name: "Yandex",
                      maxZoom: 17});
// projection is ignored if passed to MapTypeOptions
yandexMapType.projection = new YandexProjection();
map.mapTypes.set("Yandex", yandexMapType);

Answer 2

根据license agreement，您无法在没有yandex api的情况下使用yandex地图。你不能在传单中使用yandex瓷砖。

您需要包装yandex api或使用http://leafletjs.com/plugins.html

或者写一个包装器。

示例https://all-maps.herokuapp.com/

https://github.com/artamonovdev/all-maps

在Google Maps v3中使用Yandex地图图块

2 个答案: