矢量室内地图

本文介绍了一次因项目需求进行室内地图开发的经历,从遇到位图地图缩放失真、加载慢和内存溢出问题,转向使用HTML5的SVG进行矢量地图开发。通过这种方式,解决了地图缩放的失真问题,并实现了适用于Android和iOS的效果。文章内容包括矢量地图的格式设定、缩放量调整、背景颜色设置、文字缩放以及点击商铺的响应方法,并展示了最终效果。
摘要由CSDN通过智能技术生成

因为公司项目的需要,需要开发一套室内地图,并实现路线的规划功能。因为之前没做过这方面的开发,相关的资料也比较少,所以只能一个人去摸索。刚开始我是使用一般的位图去当作的地图,但是这个也让我在后面吃了不少的苦头。
我们知道地图一般都会有缩放和拖拽等功能,正当我把一样利用位图开发的地图样例时,我发现了不少的问题:
1、位图缩放会失真;
2、图片加载比较慢;
3、会导致客户端内存溢出
。。。

因为这些问题,我不得不放弃这种方法。要解决上面的问题只能使用矢量图进行开发了,于是我使用了Html5进行了矢量图的开发,不仅解决了地图缩放失真等问题,还同时适用于Android、ios等,个人感觉效果还是相当的好,下面我来介绍一下此种方法

一、矢量地图

因为是矢量地图,那肯定得要有矢量图的数据,那么可能就得去了解一下SVG,在这里我就不进行介绍了,大家想学习的可以到网上搜索到很多相关的介绍,下面是地图规定的一种格式:

/**
 * Created by Administrator on 2015/11/5.
 */
$.fn.vectorMap('addMap', 'us_aea_en',
    {
        "insets":
        [
            {"width": 220, "top": 440, "height": 146.9158157558812, "bbox": [{"y": -8441281.712315228, "x": -5263934.893342895}, {"y": -6227992.545028123, &
  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值