智慧旅游-手绘瓦片地图遇到的问题与制作流程（一）

微信小程序智慧景区 金典案例“游云南”、“腾讯智慧景区”，这些是使用微信小程序自带的腾讯地图开发的，这个腾讯还未对外开放相信你们也有了解

那么我们怎么实现微信小程序智慧景区呢？

下面我们说一下使用方式H5实现微信小程序智慧景区

在开发中我们首先考虑选择腾讯地图，主要考虑到以后小程序兼容问题（事实证明这是想多了）

基于腾讯地图做H5瓦片 我就在这里简单讲一下需要用到的几个功能

    function getNormalizedCoord(coord, zoom) {
            var y = coord.y;
            var x = coord.x;
            var tileRange = 1 << zoom;
            if (y < 0 || y >= tileRange) {
                return null;
            }
            if (x < 0 || x >= tileRange) {
                x = (x % tileRange + tileRange) % tileRange;
            }
            return {
                x: x,
                y: y
            };
        }
       
        var map;
        function init() {
//新建一个ImageMapType，实现ImageMapTypeOptions规范
            var earthlayer = new qq.maps.ImageMapType({
                name: '绿色家园',
                alt: '绿色家园',
                tileSize: new qq.maps.Size(256, 256),
                minZoom: 1,
                maxZoom: 5,
                getTileUrl: function (tile, zoom) {
                    var normalizedCoord = getNormalizedCoord(tile, zoom);
                    if (!normalizedCoord) {
                       return null;
                    }
                    var z = zoom,
                        x = tile.x,
                        y = tile.y;
                    return 'http://3gimg.qq.com/tencentMapTouch/lbs/demoimg/tile_' + z + '_' + normalizedCoord.x + '-' + normalizedCoord.y + '.png'
            }
        });

            map = new qq.maps.Map(document.getElementById("container"), {
                // 地图的中心地理坐标。
                center: new qq.maps.LatLng(39.916527, 116.397128),
                zoom: 2,

               draggable: false,               //设置是否可以拖拽
               scrollwheel: false,             //设置是否可以滚动
               disableDoubleClickZoom: true    //设置是否可以双击放大
                mapTypeId: 'coordinate',
                mapTypeControlOptions: {
                    mapTypeIds: ['earth']
                }
            });
            map.mapTypes.set('earth', earthlayer);
            map.setMapTypeId('earth');
            var info_span = document.getElementById("info");
            var n = 0;
            //监听ImageMapType图片加载
            qq.maps.event.addListener(map, "tilesloaded", function () {
                info_span.innerText = "tilesloaded:第" + ++n + "次";
            });
        }
将瓦片以上述方式渲染后我们就开始做地图图标标记

var init = function() {
    var center = new qq.maps.LatLng(39.916527,116.397128);
    var map = new qq.maps.Map(document.getElementById('container'),{
        center: center,
        zoom: 13
    });

 var latlngs = [
        new qq.maps.LatLng(39.91474,116.37333),
        new qq.maps.LatLng(39.91447,116.39336),
        new qq.maps.LatLng(39.90884,116.41306)
    ];

    for(var i = 0;i < latlngs.length; i++) {
        (function(n){
            var marker = new qq.maps.Marker({
                position: latlngs[n],
                map: map
            });
            qq.maps.event.addListener(marker, 'click', function() {
                infoWin.open();
                infoWin.setContent('

');
                infoWin.setPosition(latlngs[n]);
            });
        })(i);
    }

}
做好标记后做点击标记事件

var init = function() {
    var center = new qq.maps.LatLng(39.916527,116.397128);
    var map = new qq.maps.Map(document.getElementById('container'),{
        center: center,
        zoom: 13
    });
    //创建标记
    var marker = new qq.maps.Marker({
        position: center,
        map: map
    });
    //添加到提示窗
    var info = new qq.maps.InfoWindow({
        map: map
    });
    //获取标记的点击事件
    qq.maps.event.addListener(marker, 'click', function() {
        info.open(); 
        info.setContent('

');
        info.setPosition(center); 
    });

  //添加监听事件
    qq.maps.event.addListener(map, 'click', function() {
        alert('您点击了地图.');
    });

}

这样基本就实现了简单是手绘瓦片地图显示 与点击效果。更多详细功能留下次我们继续讲解