腾讯位置 - 地图构建入门原创

大家好，本期视频呢，将为大家演示一下如何在前端构建一个最简的腾级地图，同时呢，我们也需要呢去申请一个密钥，在引入类库的时候呢来进行使用，那有了基础的地图之后呢，我们可以在此基础之上呢，去做一些更为细致的操作或者是功能，比如说标点啊区域的绘制，以及呢进行一些定制化的操作，会在后面的文章当中呢继续给大家介绍好，首先呢，我们先打开腾讯位置的官网去申请一个密钥，在密钥申请之前呢，我们需要先补全开发者的信息，可以直接使用QQ来登录，登录完了之后呢，进入到控制台啊，在这个地方呢，补全开发者信息之后呢，就可以来到key的管理，在这呢去创建一个新的密钥，那创建新的密钥的时候呢，主要呢，是填写K的名称以及验证码，然后呢等待审核，审核完成之后呢，我们可以进入到。

设置界面来查看一下它目前启动的产品，那我们现在呢，要使用的就是javascript API以及地图的相关组件啊，默认的都是勾选的。好，接下来呢，我们。在另外一个页面呢，去打开一下它的开发文档啊，在这个开发文档当中呢，我们找到javascript API。然后呢，选择基础入门，这里面呢，提供了一个最基本的案例啊，可以呢直接在我们的页面上呢，去构建出一个腾讯地图，好，我们可以直接呢复制一下下面的这一部分代码，我们需要修改的地方呢，就是T的部分啊，我们要呢在线去引入一个JS文件，同时呢去传入我们自己的密钥，首先呢我们先复制一下，然后呢来到h build当中呢，去新建一个页面，大家在做的时候呢，需要注意一下，我们可以呢使用记事本去编辑HTML文件，但是当我们运行的时候呢，一定要以服务的方式来运行，那HP的这个工具呢，本身呢，它就会自己构建一个服务啊，不要用浏览器呢，直接去访问这个atl，否则的话呢，我们这个GS的引入呢，是会出现问题的，我们这个文件的名称呢，把它叫做map。

好，然后呢，全部选中覆盖粘贴，手动呢把key的部分呢删除。然后呢，复制一下我们自己的key。粘贴保存，我们大概的来看一下这个代码，首先呢，我们在body当中呢，去定义了一个区域叫做container，然后呢，我们通过CSS呢来给它指定了一个大小宽度和高度啊这个地方呢，可以根据我们的需要呢，自己来进行设置，那在整个页面加载完成之后呢，我让他去执行了一个方法，在script当中呢，去定义了一个初始化地图的这样的一个方法。

那在这个方法定义的时候呢，需要去指定一个中心点的坐标，同时呢，我们还可以去设定它要在哪一个区域当中去渲染这个地图，除此之外呢，还可以去设定它的初始的缩放级别，俯视角和旋转的角度，好那保存之后呢，我们点击预览来查看一下它的运行结果。好，那现在我们已经能够得到的是一个动态的可以操作的一个地图，我们可以使用鼠标呢来进行拖拽啊，双击或者是使用右侧的按钮呢来进行缩放，也可以呢去旋转它的角度。好，那在这个案例当中呢，他给出的这个中心点的坐标呢，是默认的一个坐标，那我们呢，也可以使用开发文档当中的这个坐标拾取器呢，直接去。

查询一个地点，比如说可以给他更换到其他的城市。来看一下深圳的西部硅谷，点击搜索之后呢，选择一个地点，就可以获得到当前的一个坐标，我们可以把它复制一下，然后呢，在初始的位置的时候呢。给他指定到我们刚刚选择的这个地点，再来查看一下结果。啊，这样的话呢，就来到了我们刚刚指定到的这个深圳的西部硅谷，那除了使用坐标式取器以外呢，我们在开发当中呢，可以直接去调用一个地址解析的一个接口，可以在开发文档当中呢来找到。可以呢，直接去查看一下地址，解析它的一个具体的用法，在后面的视频当中呢，也会给大家进行演示，好，那本期视频呢，就到这里，如果大家有任何的问题呢，可以在视频下方留言，也可以给我发私信，我们下期再见。