如何制作门店分布手绘地图？并将图片图层精确地对准在地图上？

看到有的朋友在做门店地图导航
但地图的底图却是普通的导航底图
不美观
而且对于聚焦商家的品牌效应
也不明显
想一想，我的导航地图上
能看到别的商家的门店
而且还是同业竞争的商家
这个于情于理
都说不过去
那么，该怎么办？

这个，便需要用手绘地图覆盖来实现
说白了，就是在导航的原有底图上
用自己手绘的图片
把它覆盖掉
自己画的图片
自主性就大了

我以鼓浪屿为例子
先看效果图
↓↓↓↓↓↓↓↓
点这里点这里


那么，该怎么实现呢？
其实地图本身的研发量很小
几行代码就能搞定
关键是手绘图
这个要求比较高

首先，确定图片的绘制范围
以鼓浪屿地图为例，打开框选取点工具：http://zhaoziang.com/amap/getBounds.htm
获取到左下角和右上角的坐标，这个就是图片的显示范围。
如下图，3是左下角，1是右上角。

bounds: new AMap.Bounds( [118.057708, 24.436293],   //左下角 [118.077706, 24.454069]    //右上角 )




接着，便是最为重要的制作图片过程
由于每家公司的设计人员都有自己的特色
这里就不多说了
打开PS
请注意，绘制的图片，一定和您框选的范围一致！




绘制过程中，保证绘制内容和底图高度重合！
这里一定要保证图片重合，后期无法通过纠偏、校准等方式对齐图片！一定注意！





绘制完毕后，保存图片。
请注意，生成的图片，一定和您框选的范围一致！！
也就是说，如果有白边，也需要保留。




然后，将图片叠加到高德地图上
代码很简单
创建地图-建立图片图层-OK
核心代码如下：

var imageLayer = new AMap.ImageLayer({
        url: 'gulangyu.png',
        bounds: new AMap.Bounds(
         [118.057708, 24.436293],   //左下角
         [118.077706, 24.454069]    //右上角
         ),
        zooms: [15, 18]
    });
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [118.067042,24.444673],
        zoom: 15,
        layers: [
            new AMap.TileLayer(),
            imageLayer
        ]
    });

相信懂得朋友已经知道怎么做了

这里我把完整代码包提供一下

链接：http://pan.baidu.com/s/1bpy6tFx 密码：kopg

很强大！支持一下

Leo_澤亞 发表于 2017-4-19 16:12
很强大！支持一下

请问一下加密密码是多少，方便的话加好友

您好，请问加密密码是多少，方便加一下好友嘛