JS地图开发

JavaScript013

JS地图开发,第1张

之前有提到由于项目需要进行LBS,从而对百度地图进行了一些研究。碰巧最近又接触了微信小程序,其中也涉及到有关地图方面的开发,腾讯地图这不就也来了。所以记录一下项目实践过程中的一些感悟。

首先,从官方文档来看(以下内容仅仅是JavaScript API部分):百度地图和腾讯地图很类似。不仅仅体现在支持的绘画图层(标记点、信息窗口、覆盖物)和服务类(常用的路线规划、正/逆地址解析),甚至命名也很一致。因此,有其中一个的开发经验,另一个也可以很快上手。

使用方式也一致。申请key以后引入到项目中。

默认样式主题。个人认为腾讯比百度好看(个人看法!),但是都支持自定义主题样式,因此没什么区别。

文档查阅。个人认为百度优于腾讯。

每日调试次数对比:百度配额更高些

https://lbsyun.baidu.com/solutions/privilege

https://lbs.qq.com/service/webService/webServiceGuide/webServiceQuota

有个小区别在于经纬度标准,两者数据需要进行一个转换,否则会有些许偏差。

作为一个用户,在平时导航使用感受是:高德>百度>腾讯。由于现在还没在开发过程中使用过高德地图,只是粗略地去看了眼官方文档,其中有一个关于天气的服务支持,好像在另外两家没有看到。其他的也都大同小异。不过腾讯有个支持游戏的LBS服务的解决方案,特色~

正常情况下,你的服务器能访问到外网,且带宽正常,加载速度都快的。如果慢可以检查下有没有写了一些异常的JS请求,也可以调用他的其他api检测下是否网速问题,也可以检查下防火墙出入配置等。据我了解JS开发,是不提供离线地图的,只有在线使用。

这里,我用的是HTML5页面进行设计的。那么,首先创建一个HTML5文件,

如下图所示:

接着,设置下禁止浏览器窗口大小改变地图大小,并引入地图核心JS

<meta name="viewport" content="initial-scale=1.0,user-scalable=no">

设置因浏览器大小改变地图大小,进行禁止;引入地图核心js前,记得到官网上申请密钥

如下图所示:

地图如何在页面上展示出来,这里就需要一个地图容器。于是,我在<body></body>中设置一个div,作为地图容器,

如下图所示:

接着,设置下body、div元素的样式,如宽度、高度、字体以及字体大小等。这里,必须要设置下宽度和高度,且使用百分比,这样让其自适应,

如下图所示:

然后,编写生成地图的核心JS,指定地图的经纬度,地图为2D的,放大级别zoom,

如下图所示:

最后,将地图初始化函数放到body中的onload事件中,让初始化页面就加载地图,

如下图所示:

7

但是,我发现这样写的话,地图始终不出来;于是,我仔细检查下,结果发现地图容器的ID和初始化函数地图ID不一致,还有没有设置html元素的样式,导致地图始终显示不了。修改完了之后,重新刷新浏览器,地图显示出来了