想要创建以你为中心的地图，需要2步。
第一步，获取你所在地址
第二步，将你的地址赋给中心点并创建地图。

1 申请账号

（1）本次，使用的腾讯的接口。要先申请key
从官网进入后，进入控制台。点击创建新密钥

（2）申请后，进行设置

如果设置的是webservice，且是签名校验的话，需要在下面url后加上sign=“签名”，不然会出现

2 创建地图

在获取你的ip之前，我们先来创建地图。如果你发现你照着代码写，却不显示地图，可以检查一下有没有哪里拼写错误。（这里为啥不需要sign我也不太清楚）

<!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><script src="https://map.qq.com/api/gljs?v=1.exp&key=你的key"></script><script>function initMap() {//定义地图中心点坐标var center = new TMap.LatLng(39.984120,116.307484);//定义map变量，调用TMmap.Map()构造函数创建地图var map = new TMap.Map(document.getElementById('container'),{center:center,//设置地图中心点坐标zoom:17.2,//设置地图缩放级别pitch:43.5,//设置俯仰角rotation:45//设置地图旋转角度});}</script>
</head>
<body onload="initMap()"><!--定义地图显示容器--><div id="container"></div>
</body>
</html>

效果图

3 获取你的地址

创建完地址，也许你就明白。你的地址应该填在哪里了。下一步要解决的就是如何获取你的地址。
接口用的是

https://apis.map.qq.com/ws/location/v1/ip?ip=61.135.17.68&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77

如果你是用php也许只需要file_get_contents。
但是用js jquery的话，就需要注意跨域问题。如果直接调用接口就会出现下面这个报错。

那么，怎们解决呢？我参考了这个例子。由于，获取ip地址方法是异步的，所以我把后续创建地图的代码也移入了其中。

<!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><script src="https://map.qq.com/api/gljs?v=1.exp&key=你的key"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>function initMap() {//根据ip获得对应城市$.ajax({type: "get",async: true, //异步url: "http://apis.map.qq.com/ws/location/v1/ip", //接口地址data: {"key": "你的key","output": "jsonp",sign: "你的签名" }, //参数格式必须用到output传参为jsonp，否则会报跨域问题dataType: "jsonp", //跨域，必须用到jsonpcomplete: function(XHR, TS) {var lat = XHR.responseJSON.result.location.lat;var lng = XHR.responseJSON.result.location.lng;//定义地图中心点坐标var center = new TMap.LatLng(lat, lng);//定义map变量，调用TMmap.Map()构造函数创建地图var map = new TMap.Map(document.getElementById('container'), {center: center, //设置地图中心点坐标zoom: 17.2, //设置地图缩放级别pitch: 43.5, //设置俯仰角rotation: 45 //设置地图旋转角度});}});}</script>
</head>
<body onload="initMap()"><!--定义地图显示容器--><div id="container"></div>
</body>
</html>

成果图

一张以你为中心的地图相关推荐

交互式地图_张晟推出学校资源交互式地图工具
张晟推出"学校资源"交互式地图工具. (尹英姿摄) "学校资源"交互式地图工具显示的曼哈顿华埠的学校情况. (取自市议会官网) [侨报记者尹英姿报道]纽约市公立 ...
中心/设置地图缩放以覆盖所有可见的标记？
本文翻译自:Center/Set Zoom of Map to cover all visible Markers? I am setting multiple markers on my map a ...
【蓝桥杯】有一张 m×n 个小方格的地图，一个机器人位于地图的左上角，它每步只能向右或者向下移动一格。。。
题目描述有一张 m×n 个小方格的地图,一个机器人位于地图的左上角(如图标记为 Start 的地方),它每步只能向右或者向下移动一格,如果走到右下角的终点(如图标记为 Finish 的地方),有多少 ...
Echarts 空运图和海运图以中国为中心的地图中英文地图切换
前言: 图1是第一版本,又做出了整改,整改也会放在下面,对地图对航线对海运线等做出的一些调整. 简单的概述一下,并把中英文地图的坐标点,以及以中国为中心的json放在后 ...
8 张别具风格的卫星地图资源分享
有人说:一个人从1岁活到80岁很平凡,但如果从80岁倒着活,那么一半以上的人都可能不凡. 生活没有捷径,我们踩过的坑都成为了生活的经验,这些经验越早知道,你要走的弯路就会越少. 1.Tomnod/Ge ...
8张PPT带你了解Pyecharts地图可视化
前几天,一位公众号粉丝问我,Python在GIS领域越来越火,到底有哪些开源库值得学习? 之所以很多GIS行业的人学习Python,是因为Python在GIS数据处理和可视化领域有很多开源工具,还能友 ...
干货分享：vue2.0做移动端开发用到的相关插件和经验总结(2)
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
趣味三角——第10章——(sinx)/x
第10章函数(sinx)/x I call our world Flatland, not because we call it so, but to make its nature clear t ...
六张地图重新审视世界
2019独角兽企业重金招聘Python工程师标准>>> 六张地图重新审视世界摘自:Khanna的"Connectography: Mapping the Future o ...

一张以你为中心的地图

1 申请账号

2 创建地图

3 获取你的地址

一张以你为中心的地图相关推荐

最新文章

热门文章