本文仅为腾讯地图 API 调用入门,如需进阶学习,请在腾讯位置服务网站上进行学习。
登陆网址 https://lbs.qq.com/
点击右上角的登陆按钮,需要进行注册按照流程进行就好。
完成之后,选择右上角的控制台,进行开发者验证。
完成后在左边栏的key管理中选择创建新密钥。
在本地新建 txt 文档,将如下代码输入到文档中,将自己的 key 在文档中的相应位置处进行替换。(24行)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>个性化地图</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
7 <style type="text/css">
8 html,body{
9 width:100%;
10 height:100%;
11 }
12 *{
13 margin:0px;
14 padding:0px;
15 }
16 body {
17 font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
18 }
19 #container{
20 min-width:600px;
21 min-height:767px;
22 }
23 </style>
24 <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXX"></script> // 用自己的key替换XXXXX
25 <script>
26 window.onload = function () {
27 function init() {
28 // 创建地图
29 var map = new qq.maps.Map(document.getElementById("container"), {
30 center: new qq.maps.LatLng(39.916527, 116.397128), // 地图的中心地理坐标
31 zoom: 8, // 地图缩放级别
32 mapStyleId: 'style1' // 该key绑定的style1对应于经典地图样式,若未绑定将弹出无权限提示窗
33 });
34 }
35 //调用初始化函数
36 init();
37 }
38 </script>
39 </head>
40 <body>
41 <!-- 定义地图显示容器 -->
42 <div id="container"></div>
43 </body>
44 </html>
将 txt 文档后缀换成 html,双击运行即可。
转载于:https://www.cnblogs.com/Taskr212/p/10659207.html
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)