html前端使用腾讯地图入门教学：在地图上标记位置
本文教给大家如何使用JavaScript API进行基于LBS的基础开发：在地图上标记位置。提供地图服务的有高德地图、百度地图和腾讯地图，腾讯地图上的JavaScript API已升级到了JavaScript API GL，Javascript API GL是基于WebGL技术打造的D版地图API，D化的视
本文教给大家如何使用JavaScript API进行基于LBS的基础开发：在地图上标记位置。提供地图服务的有高德地图、百度地图和腾讯地图，腾讯地图上的JavaScript API已升级到了JavaScript API GL，Javascript API GL是基于WebGL技术打造的D版地图API，D化的视野更为自由，交互更加流畅，故本文此次选取的地图是腾讯地图。
a. 注册成为开发者
b. 申请密钥，在如图位置创建新密钥
c. 进行配置
推荐使用授权IP的方式进行配置，将你个人的IP写进输入框就OK啦！
2.1 通过搜索接口到个人公司位置：
https://qq/ws/place/v1/search?keyword=嘉誉国际&boundary=region(上海,0)&key=HLSBZ-T6JR5-BIEIW-QLJSF-ACEA-*****
key换成你的
查询到公司位置为(1.29716,121.50886)
2.2 初始化地图，中心设为公司位置
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello world!</title>
<style type="text/css">
#container{
/*地图(容器)显示大小*/
width:1200px;
height:400px;
}
</style>
<!--引入Javascript API GL，参数说明参见下文-->
<script src="https://map.qq/api/gljs?v=&key=OB4BZ-D4WU-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script>
//地图初始化函数，本例取名为init，开发者可根据实际情况定义
function initMap() {
//定义地图中心点坐标
var center = new TMap.LatLng(1.29716, 121.50886);
//定义map变量，调用 TMa#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间： 2025-07-17 13:18:03
推荐阅读
| 留言与评论（共有 16 条评论） |
| 本站网友 眨巴 | 5分钟前 发表 |
| 121.50886); //定义map变量 | |
| 本站网友 含羞草会不会开花 | 8分钟前 发表 |
| 开发者可根据实际情况定义 function initMap() { //定义地图中心点坐标 var center = new TMap.LatLng(1.29716 | |
| 本站网友 张语格 | 0秒前 发表 |
| //qq/ws/place/v1/search?keyword=嘉誉国际&boundary=region(上海 | |
| 本站网友 深圳市源磊科技有限公司 | 20分钟前 发表 |
| 提供地图服务的有高德地图 | |
| 本站网友 双眼皮贴 | 5分钟前 发表 |
| 1200px; height | |
| 本站网友 阿利卡拉 | 8分钟前 发表 |
| 121.50886); //定义map变量 | |
| 本站网友 精华液怎么用 | 0秒前 发表 |
| 参数说明参见下文--> <script src="https | |
| 本站网友 就要干就要吻 | 20分钟前 发表 |
| Javascript API GL是基于WebGL技术打造的D版地图API | |
| 本站网友 乌鸡汤的功效 | 24分钟前 发表 |
| 121.50886); //定义map变量 | |
| 本站网友 杭州未来科技城 | 19分钟前 发表 |
| Javascript API GL是基于WebGL技术打造的D版地图API | |
| 本站网友 沛县房产信息网 | 4分钟前 发表 |
| Javascript API GL是基于WebGL技术打造的D版地图API | |
| 本站网友 野菊花栓 | 8分钟前 发表 |
| 400px; } </style> <!--引入Javascript API GL | |
| 本站网友 火车刷票软件 | 11分钟前 发表 |
| 参数说明参见下文--> <script src="https | |
| 本站网友 南京花店 | 29分钟前 发表 |
| 调用 TMa | |
| 本站网友 中金在线股票 | 19分钟前 发表 |
| 提供地图服务的有高德地图 | |