html前端使用腾讯地图入门教学：在地图上标记位置

最新推荐文章于 2024-04-23 09:56:11 发布

小小码农biubiubiu

最新推荐文章于 2024-04-23 09:56:11 发布

阅读量4.5k

点赞数

分类专栏：新人地图开发入门文章标签：前端定位 lbs

本文链接：https://blog.csdn.net/weixin_45615467/article/details/119394173

版权

本文教给大家如何使用JavaScript API进行基于LBS的基础开发：在地图上标记位置。提供地图服务的有高德地图、百度地图和腾讯地图，腾讯地图官网上的JavaScript API已升级到了JavaScript API GL，Javascript API GL是基于WebGL技术打造的3D版地图API，3D化的视野更为自由，交互更加流畅，故本文此次选取的地图是腾讯地图。

1. 注册账号

a. 注册成为开发者
b. 申请密钥，在如图位置创建新密钥
c. 进行配置
推荐使用授权IP的方式进行配置，将你个人的IP写进输入框就OK啦！

2.使用官方Api进行地图标记（JavaScript）

2.1 通过搜索接口找到个人公司位置：

https://apis.map.qq.com/ws/place/v1/search?keyword=嘉誉国际&boundary=region(上海,0)&key=HLSBZ-T6JR5-BIEIW-QLJSF-ACEA3-*****

key换成你的
查询到公司位置为(31.329716,121.508386)

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.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
    <script>
        //地图初始化函数，本例取名为init，开发者可根据实际情况定义
        function initMap() {
            //定义地图中心点坐标
            var center = new TMap.LatLng(31.329716, 121.508386);
            //定义map变量࿰

最低0.47元/天解锁文章

小小码农biubiubiu

关注

0
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
html前端使用腾讯地图入门教学：在地图上标记位置

本文教给大家如何使用JavaScript API进行基于LBS的基础开发：在地图上标记位置。提供地图服务的有高德地图、百度地图和腾讯地图，腾讯地图官网上的JavaScript API已升级到了JavaScript API GL，Javascript API GL是基于WebGL技术打造的3D版地图API，3D化的视野更为自由，交互更加流畅，故本文此次选取的地图是腾讯地图。1.、注册账号a. 注册成为开发者b. 申请密钥，在如图位置创建新密钥c. 进行配置推荐使用授权IP的方式进行配置，将你个人的
复制链接

扫一扫