腾讯地图 API 调用入门

2023-05-16

 本文仅为腾讯地图 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(使用前将#替换为@)

腾讯地图 API 调用入门 的相关文章

随机推荐

  • 错误:端口被占用解决办法

    1 首先打开cmd xff0c 输入以下命令netstat ano xff0c 这是在查看所有端口 2 会列出以下端口 这里根据你的占用窗口找到他的PID xff0c 我这里占用的是1080 xff0c 可以看到他的PID是10512 3
  • 在RuoYi-Cloud若依系统的环境部署的建议及总结

    RuoYi Cloud若依系统的环境部署 为了开发项目 xff0c 使用了RuoYi Cloud系统 xff0c 在前期需要搭建好相应的环境 xff0c 然后再进行实际开发 下面是综合 RuoYi 官方在线文档的相应介绍及自己在搭建中的步骤
  • (第二版)亿级流量电商详情页系统实战-缓存架构+高可用服务架构+微服务架构+课件

    第1节课程介绍以及高并发高可用复杂系统中的缓存架构有哪些东西 第2节基于大型电商网站中的商品详情页系统贯穿的授课思路介绍 免费观看 7分钟 第3节小型电商网站的商品详情页的页面静态化架构以及其缺陷11分钟 第4节大型电商网站的异步多级缓存构
  • 解决idea报错 “cannot access class“ 同一包下Java代码飘红

    解决idea报错 cannot access class 同一包下Java代码飘红 遇到的问题 xff1a 同一个包下的java代码 xff0c 突然飘红 xff0c 出现红色的波浪下划线 xff0c 错误提示 xff1a cannot a
  • Spring Cloud Alibaba微服务实战笔记之微服务架构篇

    目录 xff1a 一 微服务介绍 二 微服务架构的常见问题 三 微服务架构的常见概念 四 微服务架构的常见解决方案 概述 xff1a 俗话说 xff0c 兵马未动 xff0c 粮草先行 xff0c 只有更好的理解什么是微服务 xff0c 才
  • 主流微服务技术栈Spring Cloud Alibaba

    目录 xff1a 一 国内主流微服务技术栈 二 Spring Cloud Alibaba介绍 三 总结 一 国内主流微服务技术栈 之前有段时间阿里开源的dubbo处于不怎么维护的阶段 xff0c 正好这段时间Spring cloud完善的技
  • 项目实战Dubbo Spring Cloud 并使用Nacos实现注册中心

    搞了大半天 xff0c 终于趟平了 本文中主要是基于Dubbo实现了服务提供和调用的demo xff0c 并接入Nacos注册中心 Dubbo Spring Cloud 是Spring Cloud Alibaba 的核心组件 xff0c 它
  • Dubbo高级应用事件之集群容错

    目录 xff1a 什么是容错Dubbo容错模式 Dubbo集群模式配置 什么是容错 xff1f 在分布式架构的网络通信中 xff0c 容错能力是必须要具备的 那什么叫做容错昵 xff1f 简单来说就是服务容忍错误的能力 xff0c 具体来说
  • HDU 5984(求木棒切割期望 数学)

    题意是给定一长为 L 的木棒 xff0c 每次任意切去一部分直到剩余部分的长度不超过 D xff0c 求切割次数的期望 若木棒初始长度不超过 D xff0c 则期望是 0 000000 xff1b 设切割长度为 X 的木棒切割次数的期望是
  • 书籍推荐:Spring源码深度解析(第2版)

    Spring源码学习必读书籍 Spring源码深度解析 xff08 第2版 xff09 从核心实现 企业应用和Spring Boot这3个方面 xff0c 由浅入深 由易到难地对Spring源码展开了系统的讲解 xff0c 包括Spring
  • chrome cookies cookie 解密 写入(80+版本)

    一 xff0c 历史变迁 80之前 xff0c 解密 xff1a win32crypt CryptUnprotectData encrypted value bytes None None None 0 1 xff0c 老文N多 xff0c
  • 使用 Nemo 替代 Ubuntu 自带的文件管理器

    Nautilus 是 Ubuntu 下默认的文件管理器 xff0c 为什么要替换它呢 xff1f 如果你用过 Ubuntu 13 04 或 13 10 xff0c 我想你就不会问这个问题了 xff0c 真是 谁用谁知道 Nemo 虽然没有
  • springboot错误: 找不到或无法加载主类

    IDEA如果遇到创建完springboot后 要简单运行 xff0c 却出现找不到或者无法加载主类的这种情况 请再maven那边先clean下 gt 然后再打包package 这样再重新运行就好啦 记得是在Maven gt Lifecycl
  • Linux驱动简介和开发流程--Linux驱动学习(1)

    Linux驱动简介和开发流程 学习笔记 Linux 驱动的分类 Linux三大设备驱动 1 字符设备驱动 IO的传输过程是以字符为单位的 xff0c 没有缓冲 比如I2C SPI都是字符设备 2 块设备驱动 IO传输过程中是以块为单位的 跟
  • 性能优化与内存优化

    性能优化 主要以这四个方向进行优化 xff1a 稳定流畅耗损apk 瘦身 稳定 避免内存溢出异常捕获反馈机制 流畅 卡顿的原因 xff1a 布局复杂动画过多View 的过度绘制UI 耗时操作频繁 GC 耗损 减少没必要的网络访问或合并相关网
  • java 实现快速排序

    1 介绍 快速排序是对冒泡排序的一种改进 它的基本思想是 xff1a 通过一趟排序将要排序的数据分割成独立的两部分 xff0c 其中一 部分的所有数据都比另外一部分的所有数据都要小 xff0c 然后再按此方法对这两部分数据分别进行快速排序
  • 计算机网络——FTP网络服务器

    目录 一 实验目的与要求 二 实验内容与方法 三 实验步骤与过程 一 实验目的与要求 学习安装 使用FTP服务器软件和FTP客户端软件 xff0c 掌握基本的FTP传输数据的控制方式 xff0c 能对FTP协议数据包抓取并进行分析 实验环境
  • 树莓派踩坑之VNC Timed out waiting for a response from the computer

    笔者纯小白入坑树莓派 xff0c 今天在通过VNC viewer 对树莓派进行远程操作时遇到了超时报错 xff0c 报错如下 xff1a VNC Timed out waiting for a response from the compu
  • 系统System.img解包和重新打包过程

    系统System img解包和重新打包过程 把system img转换成ext4格式 simg2img system img system ext4 img 挂载ext4到systemMount目录进行修改 sudo mount syste
  • 腾讯地图 API 调用入门

    本文仅为腾讯地图 API 调用入门 xff0c 如需进阶学习 xff0c 请在腾讯位置服务网站上进行学习 登陆网址 https lbs qq com 点击右上角的登陆按钮 xff0c 需要进行注册按照流程进行就好 完成之后 xff0c 选择