ImageMapType上的Google Maps V3 KML图层

时间:2011-06-14 08:32:32

标签: javascript maps

我有一个很小的自定义地图,通过MapTiler创建,很容易让它用GMaps渲染。所需的几行代码的基础知识如下。

我有一个可爱的小KML图层,渲染得很好。

然而......对于我的生活,我无法让两个图层一起显示。一旦指示KML渲染,自定义地图图层就会消失。 Firebug甚至告诉我,我的自定义瓷砖甚至都没有要求!理想情况下,我需要在自定义地图图层上使用KML图层。它将显示几个英国地标的位置。

在我的脑海里,我正在考虑投影类型和冲突,但是当两个图层在基本地图上单独渲染时,我真的处于黑暗中。

任何人都可以在Google Maps V3中通过自定义地图类型向我提供有关KML图层的建议吗?

谢谢

  var MyCustomMapType = new google.maps.ImageMapType({
 getTileUrl: function(tile, zoom) {
        return "/static/images/maps/uk/" + zoom+"/"+tile.x+"/"+ tile.y +".png";
 }, 
 tileSize: new google.maps.Size(256, 256),
  });

  function init(){

  var mapOpts = {
    zoom: 6,
    center: new google.maps.LatLng(53.94315470224928, -3.515625),
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById("map_canvas"), mapOpts);
map.overlayMapTypes.insertAt(0, MyCustomMapType);
var cathedrals = new google.maps.KmlLayer('http://pointing_at_my/kml/');

// as soon as this executes, ImageMapType layer disappears
cathedrals.setMap(map);
 }

1 个答案:

答案 0 :(得分:0)

解决。只是不要做白痴。

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">

        var map, cathedrals;

        var ukOverlay = new google.maps.ImageMapType({

            getTileUrl: function(coord, zoom) {

                var ymax = 1 << zoom;
                var y = ymax - coord.y -1;
                return "/static/images/maps/uk/" + zoom+"/"+coord.x+"/"+y+".png";

            }, 
            tileSize: new google.maps.Size(256, 256),
            isPng: true

       });

function init(){

    var mapOpts = {
        zoom: 6,
        center: new google.maps.LatLng(54.40315470224928, -3.515625),
        mapTypeId: google.maps.MapTypeId.HYBRID ,
        disableDefaultUI: false,
        mapTypeControl: false,
        scrollwheel: false,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        draggable: false
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOpts);
    cathedrals = new google.maps.KmlLayer('http://cathedralcafes.co.uk/kml/', {preserveViewport: true});
    map.overlayMapTypes.insertAt(0, ukOverlay);     
    cathedrals.setMap(map);
}

    </script>