腾讯地图API使用

最新推荐文章于 2025-07-14 17:45:37 发布
原创 最新推荐文章于 2025-07-14 17:45:37 发布 · 6.5k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

工作需求：

由于同一栋大楼有多个机构，所以在地图上，这些机构的点都重叠在一起，需要添加一个地图功能，使得移动一点，改变机构经纬度，来让他们的lat lng不同

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>设置marker属性</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        body,
        button,
        input,
        select,
        textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        p {
            width: 603px;
            padding-top: 3px;
            margin-top: 10px;
            overflow: hidden;
        }
        .btn {
            width: 112px;
        }
    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=M7VBZ-476RJ-TSIFB-FMZIF-YG4OT-RFFNG"></script>
   
 
</head>
 
<body onLoad="init()">
    <script>
        function init() {
        	let lat = getQueryString("lat");
        	let lng = getQueryString("lng");
        	let id = getQueryString("id");
        	/* let address = decodeURI(getQueryString("address"),"utf-8"); */
        	
            var center = new qq.maps.LatLng(lat, lng);
            var map = new qq.maps.Map(document.getElementById("container"), {
                center: center,
                zoom: 30
            });
            //创建一个Marker
            var marker = new qq.maps.Marker({
                //设置Marker的位置坐标
                position: center,
                //设置显示Marker的地图
                map: map
            });
 
            //设置Marker的可见性，为true时可见,false时不可见，默认属性为true
            marker.setVisible(true);
            //设置Marker的动画属性为从落下
            marker.setAnimation(qq.maps.MarkerAnimation.DOWN);
            //设置Marker是否可以被拖拽，为true时可拖拽，false时不可拖拽，默认属性为false
            marker.setDraggable(true);
            ////设置Marker自定义图标的属性，size是图标尺寸，该尺寸为显示图标的实际尺寸，origin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标，anchor是锚点坐标，描述经纬度点对应图标中的位置
            var anchor = new qq.maps.Point(0, 39),
                size = new qq.maps.Size(42, 68),
                origin = new qq.maps.Point(0, 0),
                icon = new qq.maps.MarkerImage(
                    "https://open.map.qq.com/doc/img/nilt.png",
                    size,
                    origin,
                    anchor
                );
            marker.setIcon(icon);
            //设置Marker阴影图片属性，size是图标尺寸，该尺寸为显示图标的实际尺寸，origin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标，anchor是锚点坐标，描述经纬度点对应图标中的位置
            var anchorb = new qq.maps.Point(3, -30),
                sizeb = new qq.maps.Size(42, 11),
                origin = new qq.maps.Point(0, 0),
                iconb = new qq.maps.MarkerImage(
                    "https://open.map.qq.com/doc/img/nilb.png",
                    sizeb,
                    origin,
                    anchorb
                );
            marker.setShadow(iconb);
            //设置标注的名称，当鼠标划过Marker时显示
            marker.setTitle("测试");
 
            //添加信息窗口
            var info = new qq.maps.InfoWindow({
                map: map
            });
            //获取标记的可拖动属性
            info.open();
            info.setContent("经度："+lng+"——纬度："+lat);
            info.setPosition(marker.getPosition());
            //标记Marker点击事件
            qq.maps.event.addListener(marker, 'click', function() {
                info.open();
                info.setContent('<div style="text-align:center;white-space:nowrap;' +
                    'margin:10px;">单击标记</div>');
                info.setPosition(marker.getPosition());
            });
            //设置Marker停止拖动事件
            qq.maps.event.addListener(marker, 'dragend', function() {
                info.open();
                info.setPosition(marker.getPosition());
                info.setContent('<div style="text-align:center;white-space:nowrap;' +
                    'margin:10px;">改变成功！当前的经度为：'+marker.getPosition().lng+'——纬度为：'+marker.getPosition().lat+'</div>');
                //getPosition()  返回Marker的位置
                
                //把修改后的经纬度保存回数据库
                let forumAgency = new Object();
                forumAgency.agencyLng=marker.getPosition().lng;
                forumAgency.agencyLat=marker.getPosition().lat;
                forumAgency.id=id;
                Ajax.request({
            		url: "../forumagency/updatelatlng",
            		params: JSON.stringify(forumAgency),
 				    contentType: "application/json",
            		type: "POST",
            		contentType: "application/json",
            		successCallback: function (r) {
            			console.log(r)
            		}
            	}); 
            });
 
        }
    </script>
    <div style="width:100%;height:700px" id="container"></div>

</body>
 
</html>

还有其他几个能用的不同功能的model

可拖动标签地图

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>设置marker属性</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        body,
        button,
        input,
        select,
        textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        p {
            width: 603px;
            padding-top: 3px;
            margin-top: 10px;
            overflow: hidden;
        }
        .btn {
            width: 112px;
        }
    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=M7VBZ-476RJ-TSIFB-FMZIF-YG4OT-RFFNG"></script>
 
</head>
 
<body onLoad="init()">
    <script>
        function init() {
            var center = new qq.maps.LatLng(39.982163, 116.306070);
            var map = new qq.maps.Map(document.getElementById("container"), {
                center: center,
                zoom: 16
            });
            //创建一个Marker
            var marker = new qq.maps.Marker({
                //设置Marker的位置坐标
                position: center,
                //设置显示Marker的地图
                map: map
            });
 
            //设置Marker的可见性，为true时可见,false时不可见，默认属性为true
            marker.setVisible(true);
            //设置Marker的动画属性为从落下
            marker.setAnimation(qq.maps.MarkerAnimation.DOWN);
            //设置Marker是否可以被拖拽，为true时可拖拽，false时不可拖拽，默认属性为false
            marker.setDraggable(true);
            ////设置Marker自定义图标的属性，size是图标尺寸，该尺寸为显示图标的实际尺寸，origin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标，anchor是锚点坐标，描述经纬度点对应图标中的位置
            var anchor = new qq.maps.Point(0, 39),
                size = new qq.maps.Size(42, 68),
                origin = new qq.maps.Point(0, 0),
                icon = new qq.maps.MarkerImage(
                    "https://open.map.qq.com/doc/img/nilt.png",
                    size,
                    origin,
                    anchor
                );
            marker.setIcon(icon);
            //设置Marker阴影图片属性，size是图标尺寸，该尺寸为显示图标的实际尺寸，origin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标，anchor是锚点坐标，描述经纬度点对应图标中的位置
            var anchorb = new qq.maps.Point(3, -30),
                sizeb = new qq.maps.Size(42, 11),
                origin = new qq.maps.Point(0, 0),
                iconb = new qq.maps.MarkerImage(
                    "https://open.map.qq.com/doc/img/nilb.png",
                    sizeb,
                    origin,
                    anchorb
                );
            marker.setShadow(iconb);
            //设置标注的名称，当鼠标划过Marker时显示
            marker.setTitle("测试");
 
            //添加信息窗口
            var info = new qq.maps.InfoWindow({
                map: map
            });
            //获取标记的可拖动属性
            info.open();
            info.setContent('标记的可拖动属性为：' + marker.getDraggable());
            info.setPosition(marker.getPosition());
            //标记Marker点击事件
            qq.maps.event.addListener(marker, 'click', function() {
                info.open();
                info.setContent('<div style="text-align:center;white-space:nowrap;' +
                    'margin:10px;">单击标记</div>');
                info.setPosition(marker.getPosition());
            });
            //设置Marker停止拖动事件
            qq.maps.event.addListener(marker, 'dragend', function() {
                info.open();
                info.setContent('<div style="text-align:center;white-space:nowrap;' +
                    'margin:10px;">拖动标记</div>');
                //getPosition()  返回Marker的位置
                info.setPosition(marker.getPosition());
                alert(marker.getPosition())
            });
 
        }
    </script>
    <div style="width:100%;height:700px" id="container"></div>
    <p>Marker可以拖动，点击时弹出单击信息窗口，拖动Marker时弹出拖动信息窗口</p>
 
</body>
 
</html>

可输入地址查询的地图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<iframe id="mapPage" width="100%" height="550px" frameborder=0
    src="http://apis.map.qq.com/tools/locpicker?search=1&type=1&key=M7VBZ-476RJ-TSIFB-FMZIF-YG4OT-RFFNG&referer=myapp">
</iframe>
	</body>
	<script>
    window.addEventListener('message', function(event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var loc = event.data;
        if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
          console.log('location', loc);
        }
    }, false);
</script>
</html>

最简单到的地图示例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>简单地图</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        html,body{
            width:100%;
            height:100%;
        }
        *{
            margin:0px;
            padding:0px;
        }
        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        p{
            width:603px;
            padding-top:3px;
            overflow:hidden;
        }
        .btn{
            width:142px;
        }
        #container{
            min-width:600px;
            min-height:767px;
        }
    </style>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
 
 
        window.onload = function() {
            //初始化地图函数  自定义函数名init
            function init() {
                //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
                var map = new qq.maps.Map(document.getElementById("container"), {
                    center: new qq.maps.LatLng(39.916527, 116.397128),      // 地图的中心地理坐标。
                    zoom: 8                                                 // 地图的中心地理坐标。
                });
                //添加监听事件
                qq.maps.event.addListener(map, 'click', function (e) {
                    var wei = e.latLng.getLat().toFixed(5);
                    var jing = e.latLng.getLng().toFixed(5);
                    var data = {
                        location: wei+','+jing,
                        key: "M7VBZ-476RJ-TSIFB-FMZIF-YG4OT-RFFNG", //key为自己向腾讯地图申请的密钥
                        get_poi: 0
                    };
                    var url = "http://apis.map.qq.com/ws/geocoder/v1/?";
                    data.output = "jsonp";
                    $.ajax({
                        type: "get",
                        dataType: 'jsonp',
                        data: data,
                        jsonp: "callback",
                        jsonpCallback: "QQmap",
                        url: url,
                        success: function (res) {
                            var add_info = res;
                            //console.log(add_info);
                            alert('纬度' + wei + '，经度' + jing+'，省份'+add_info.result.address_component.province+'，城市'+add_info.result.address_component.city);
                            //console.log(add_info.address_component.province,);
                        },
                        error: function (err) {
                            alert("服务端错误，请刷新浏览器后重试")
                        }
                    });
                });
            }
            init();//调用地图初始化函数
        }
    </script>
</head>
<body>
<!--   显示地图的区域   -->
<div id="container"></div>
</body>
</html>

 

jinqianwang
关注
腾讯地图API使用指南
低代码布道师的博客
03-05 5517
微搭最近更新了新版本，已经可以无缝和腾讯地图集成了，我们已经介绍了腾讯地图如何集成，以及如何使用最新的地图组件。 在实际的业务开发中如果只用官方的组件，不太自由.有时候我们需要自己处理，这就要求我们仔细研究api的用法。本文以其中的IP定位，来介绍一下如何使用腾讯地图的API。 要想知道api的用法，我们先是需要阅读腾讯地图的官方文档 https://lbs.qq.com/service/webService/webServiceGuide/webServiceIp 首先看api的介绍 通过终端设备I
入门使用-腾讯地图API
weixin_50139963的博客
05-18 2504
一．注册账号 高德开放平台官网：高德开放平台 | 高德地图API (amap.com) 登录（或注册自己的账号）》找到我的应用》创建一个应用（应用名称都可以简单一点就好，key名称也一样）==》添加 二．基础使用 高德地图js api：概述-地图 JS API v2.0 | 高德地图API (amap.com) （链接里也有使用的教程） 1.在index.html中引入秘钥key <link rel="stylesheet" href="https://a.amap.com/jsapi_demo
腾讯地图api-demo（高德）
08-10
小程序版高德地图完美运行demo，修改index.js内的key，完美运行
腾讯地图api
weixin_45932157的博客
06-08 2401
腾讯地图jdk
解决小程序：地理位置权限申请在启动具体功能前，已封禁服务的“获取地理位置信息”能力问题
最新发布
weixin_49428989的博客
07-14 687
微信小程序因为违反微信平台规则而被封禁了"获取地理位置信息"能力。，这违反了微信的"按需申请"原则。
腾讯地图API的应用
jdk_wangtaida的博客
01-29 1万+
腾讯地图JavaScript API的应用 前言 随着社会的高速发展，手机地图已经成为了生活中不可或缺的一部分，他出现在各种app中，比如外卖app需要展示配送的路线和距离，导航的app需要路线规划和显示路线拥挤情况，社交app需要显示自己所在的位置和附近用户的位置。基本上只要你做的产品涉及到地图板块，你都需要引进相关地图api。那么对于开发者来说，怎么使用地图的api来完成我们的功能点就变的至关重要啦，这篇博客就讲解下腾讯地图JavaScript API的应用。 正文 注册腾讯位置服务账号 腾讯
腾讯地图API，强大的地图开发工具
2301_76155971的博客
08-18 1981
定位精准：腾讯位置服务基于先进的定位技术，如GPS、基站定位、WIFI定位等，可以为用户提供精准的位置信息，满足各类地图应用的需求。强大的数据支持：腾讯位置服务拥有海量的地图数据，包括道路、建筑物、地名等，可以为用户提供详尽的地图信息，满足各类地图应用的需求。数据实时更新：可以支持实时更新地图数据，通过实时采集、处理和上传地图数据，为用户提供最新的地图信息，满足实时变化的需求。丰富的功能：可以提供丰富的地图功能，如路径规划、实时位置共享、地图缩放等，满足各类地图应用的需求。
腾讯地图的开发api
09-10
腾讯地图的开发api腾讯地图的开发api腾讯地图的开发api腾讯地图的开发api腾讯地图的开发api腾讯地图的开发api腾讯地图的开发api
腾讯地图api开发的微信小程序电子围栏
09-13
2. **定位服务**：使用腾讯地图API的定位接口，获取用户当前的经纬度坐标，这是构建电子围栏的基础。开发者可以设置不同的定位精度，根据实际需求选择合适的定位频率。 3. **地理围栏创建**：定义电子围栏的边界...
js腾讯地图api获取坐标位置特效代码
03-20
在实际开发中，为了更好地理解和使用腾讯地图API，可以参考提供的“使用帮助.txt”文档，或通过“谷普下载.url”和“说明.url”链接获取更详细的信息。同时，“jiaoben181310”可能是示例代码或项目文件，建议结合...
腾讯地图海外api文档
07-09
腾讯地图海外API文档主要介绍了如何使用腾讯地图提供的海外版Web服务API。该API基于HTTP协议，支持开发者使用任何客户端、服务器和开发语言来构建HTTP请求并获取JSON或JSONP格式的结果数据。 #### 二、使用限制与...
腾讯地图api使用——地图选点自动定位到当前位置
热门推荐
我是大壳儿
07-15 1万+
根据腾讯地图api获取自身定位；地图选点默认到自身定位。
腾讯地图jsapi
weixin_47164415的博客
11-14 479
腾讯地图jsapi网址 https://lbs.qq.com/webApi/javascriptV2/jsDemo 折线图示例网址 https://lbs.qq.com/webDemoCenter/javascriptV2/polygon/addPolyline
腾讯地图api_让数据和城市一样鲜活！腾讯位置服务数据可视化API来啦丨城市数据派...
weixin_39530960的博客
12-06 708
在这个大数据时代，各式各样纷繁复杂的海量数据让我们应接不暇。如何快速发现数据背后的规律，发掘数据隐藏的价值，是帮助我们提高业务决策效率的关键。在这个过程中，数据可视化将起到不可替代的作用。尤其是带有空间属性的数据，和地图具有天然的匹配性。所以，让海量的位置数据通过一定的视觉形态在地图上进行直观的呈现，成为很多开发者们竞相考虑的选择。经过长达一年的持续打磨和场景验证，我们正式面向开发者推出...
腾讯地图jsapi使用（地图定位搜索坐标解析计算距离）
牛腩的专栏
05-16 5408
腾讯地图定位及坐标解析 一个项目，需要打开地图后点击获取地址 用的腾讯地图开放平台，对着文档花了一上午弄出来了 代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>前端定位模块</title> <meta name="view.
获取腾讯地图API小程序
hgvhjgghv的博客
04-01 420
下载微信校程序javaScriptSDK,微信小程序，JavaScriptSDK v1.1 JavaScriptSDK v1.2下载JavaScriptSDK v1.2。2.3申请微信小程序的id。
java 腾讯地图api,腾讯地图API详解
weixin_35727143的博客
03-11 2082
最近项目中需要通过用户输入的地址来判断是否在选定的地址范围内，于是想到了使用百度地图的API来通过地址得到经纬度，不过看了半天发现百度的API太不好用了，于是又找了一下腾讯地图的API，功能都写的很清楚，于是决定采用腾讯开放平台的API来实现相关的功能，后来又仔细的看了一下发现腾讯地图的API功能还是很强大的。首先要调用腾讯地图的API和调用百度的一样，需要申请key,很简单，只要绑定了手机号就可...
html前端使用腾讯地图入门教学：在地图上标记位置
小小码农biubiubiu
08-04 4917
本文教给大家如何使用JavaScript API进行基于LBS的基础开发：在地图上标记位置。提供地图服务的有高德地图、百度地图和腾讯地图，腾讯地图官网上的JavaScript API已升级到了JavaScript API GL，Javascript API GL是基于WebGL技术打造的3D版地图API，3D化的视野更为自由，交互更加流畅，故本文此次选取的地图是腾讯地图。 1.、 注册账号 a. 注册成为开发者 b. 申请密钥，在如图位置创建新密钥 c. 进行配置 推荐使用授权IP的方式进行配置，将你个人的
腾讯地图API相关总结
Java牛马的博客
03-12 893
开发文档： https://lbs.qq.com/service/webService/webServiceGuide/webServiceGeocoder开发文档： https://lbs.qq.com/service/webService/webServiceGuide/webServiceGcoder开发文档： https://lbs.qq.com/service/webService/webServiceGuide/webServiceIp
springboot腾讯地图api使用方法
02-26
### 如何在 Spring Boot 项目中使用腾讯地图 API 要在 Spring Boot 项目中集成并使用腾讯地图 API，主要涉及以下几个方面： #### 准备工作 首先需要注册成为开发者，并获取应用的密钥（Key）。这一步骤对于访问任何第三方服务都是必要的。完成此操作后，在项目的 `application.yml` 或者 `application.properties` 文件里配置好这些参数。 #### 添加依赖项 为了简化 HTTP 请求处理过程以及更好地管理 JSON 数据交换，建议引入像 RestTemplate 这样的工具类库。可以通过修改 Maven 的 POM 文件或 Gradle 构建脚本来添加相应的依赖包[^1]。 ```xml <!-- 对于Maven用户 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- 如果还需要JSON支持可选加入Jackson --> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> </dependency> ``` #### 创建服务层接口 定义一个用于封装调用腾讯地图 Web Service API 功能的服务组件。这里以地理编码为例展示基本框架结构[^4]: ```java import org.springframework.stereotype.Service; import java.io.IOException; @Service public class TencentMapService { private static final String GEOCODE_URL = "https://apis.map.qq.com/ws/geocoder/v1/"; /** * 获取地址对应的经纬度坐标. */ public Coordinate getCoordinateByAddress(String address, String key) throws IOException { // 组织请求URL... StringBuilder urlBuilder = new StringBuilder(GEOCODE_URL); urlBuilder.append("?address=").append(address).append("&key=").append(key); // 发送GET请求并解析响应数据... return null; // 返回结果对象 } } ``` 请注意上述代码片段仅作为示意用途，实际开发过程中还需考虑异常捕获、超时设置等因素；另外就是具体到不同类型的API调用时，传参方式也会有所区别，请参照官方文档说明进行调整。 #### 控制器实现 最后编写 RESTful 风格控制器以便外部能够触发该功能逻辑: ```java @RestController @RequestMapping("/tencentmap") public class TencentMapController { @Autowired private TencentMapService tencentMapService; @GetMapping("/geocode") public ResponseEntity<?> geocode(@RequestParam String address,@RequestParam String key){ try{ var coordinate=tencentMapService.getCoordinateByAddress(address,key); return ResponseEntity.ok(coordinate); }catch (Exception e){ return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(e.getMessage()); } } } ``` 以上即是在 Spring Boot 应用程序内接入腾讯地图开放平台所提供的部分基础服务的大致流程概述。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值