00:06
大家好,本期视频呢,将为大家演示一下如何在前端构建一个最简的腾级地图,同时呢,我们也需要呢去申请一个密钥,在引入类库的时候呢来进行使用,那有了基础的地图之后呢,我们可以在此基础之上呢,去做一些更为细致的操作或者是功能,比如说标点啊区域的绘制,以及呢进行一些定制化的操作,会在后面的文章当中呢继续给大家介绍好,首先呢,我们先打开腾讯位置的官网去申请一个密钥,在密钥申请之前呢,我们需要先补全开发者的信息,可以直接使用QQ来登录,登录完了之后呢,进入到控制台啊,在这个地方呢,补全开发者信息之后呢,就可以来到key的管理,在这呢去创建一个新的密钥,那创建新的密钥的时候呢,主要呢,是填写K的名称以及验证码,然后呢等待审核,审核完成之后呢,我们可以进入到。
01:06
设置界面来查看一下它目前启动的产品,那我们现在呢,要使用的就是javascript API以及地图的相关组件啊,默认的都是勾选的。好,接下来呢,我们。在另外一个页面呢,去打开一下它的开发文档啊,在这个开发文档当中呢,我们找到javascript API。然后呢,选择基础入门,这里面呢,提供了一个最基本的案例啊,可以呢直接在我们的页面上呢,去构建出一个腾讯地图,好,我们可以直接呢复制一下下面的这一部分代码,我们需要修改的地方呢,就是T的部分啊,我们要呢在线去引入一个JS文件,同时呢去传入我们自己的密钥,首先呢我们先复制一下,然后呢来到h build当中呢,去新建一个页面,大家在做的时候呢,需要注意一下,我们可以呢使用记事本去编辑HTML文件,但是当我们运行的时候呢,一定要以服务的方式来运行,那HP的这个工具呢,本身呢,它就会自己构建一个服务啊,不要用浏览器呢,直接去访问这个atl,否则的话呢,我们这个GS的引入呢,是会出现问题的,我们这个文件的名称呢,把它叫做map。
02:32
好,然后呢,全部选中覆盖粘贴,手动呢把key的部分呢删除。然后呢,复制一下我们自己的key。粘贴保存,我们大概的来看一下这个代码,首先呢,我们在body当中呢,去定义了一个区域叫做container,然后呢,我们通过CSS呢来给它指定了一个大小宽度和高度啊这个地方呢,可以根据我们的需要呢,自己来进行设置,那在整个页面加载完成之后呢,我让他去执行了一个方法,在script当中呢,去定义了一个初始化地图的这样的一个方法。
03:18
那在这个方法定义的时候呢,需要去指定一个中心点的坐标,同时呢,我们还可以去设定它要在哪一个区域当中去渲染这个地图,除此之外呢,还可以去设定它的初始的缩放级别,俯视角和旋转的角度,好那保存之后呢,我们点击预览来查看一下它的运行结果。好,那现在我们已经能够得到的是一个动态的可以操作的一个地图,我们可以使用鼠标呢来进行拖拽啊,双击或者是使用右侧的按钮呢来进行缩放,也可以呢去旋转它的角度。好,那在这个案例当中呢,他给出的这个中心点的坐标呢,是默认的一个坐标,那我们呢,也可以使用开发文档当中的这个坐标拾取器呢,直接去。
04:13
查询一个地点,比如说可以给他更换到其他的城市。来看一下深圳的西部硅谷,点击搜索之后呢,选择一个地点,就可以获得到当前的一个坐标,我们可以把它复制一下,然后呢,在初始的位置的时候呢。给他指定到我们刚刚选择的这个地点,再来查看一下结果。啊,这样的话呢,就来到了我们刚刚指定到的这个深圳的西部硅谷,那除了使用坐标式取器以外呢,我们在开发当中呢,可以直接去调用一个地址解析的一个接口,可以在开发文档当中呢来找到。可以呢,直接去查看一下地址,解析它的一个具体的用法,在后面的视频当中呢,也会给大家进行演示,好,那本期视频呢,就到这里,如果大家有任何的问题呢,可以在视频下方留言,也可以给我发私信,我们下期再见。
我来说两句