最近在做的项目需要用的天地图，置于为哈不用高德或者其他的…只能说，免费有免费的好处，收费有收费的好处吧
下面是源码，在对应位置加上你的key即可 （用PC端打开的话只能定位到城市，用手机浏览器打开的话可以定位到精确位置100米范围）<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="天地图" /> <title>天地图－地图API－web定位并获取详细地址</title> <script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=你的KEY"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style type="text/css"> body, html { width: 100%; height: 100%; margin: 0; font-family: "Microsoft YaHei" } #mapDiv { width: 100%; height: 400px } input, b, p { margin-left: 5px; font-size: 14px } </style> </head> <body onLoad="onLoad()"> <div id="mapDiv"></div> <p>用H5定位所在城市</p> <span id="localInfo"></span><br/> <span id="zuobiao"></span> <script> var map; //天地图key const mapKey = "你的KEY"; //初始化地图级别 var zoom = 12; //当前位置 var detaillocation; //加载地图 function onLoad() { //初始化地图对象 map = new T.Map("mapDiv"); //设置显示地图的中心点和级别 map.centerAndZoom(new T.LngLat(116.40969, 38.89945), zoom); //创建地图类型控件对象 var _mapType = new T.Control.MapType(); //添加地图类型控件 map.addControl(_mapType); //创建缩放平移控件对象 _zoomControl = new T.Control.Zoom(); //添加缩放平移控件 map.addControl(_zoomControl); //创建缩放平移控件对象 _zoomControl.setPosition(T_ANCHOR_TOP_LEFT); //创建定位对象lo var lo = new T.Geolocation(); //创建右键菜单对象 var menu = new T.ContextMenu({ width: 140 }); //添加右键菜单 var txtMenuItem = [{ text: '放大', callback: () => { map.zoomIn() } }, { text: '缩小', callback: () => { map.zoomOut() } }, { text: '放置到最大级', callback: () => { map.setZoom(18) } }, { text: '查看全国', callback: () => { map.setZoom(4) } }, { text: '获得右键点击处坐标', isDisable: false, callback: (lnglat) => { alert(lnglat.getLng() + "," + lnglat.getLat()); } } ]; for (var i = 0; i < txtMenuItem.length; i++) { //添加菜单项 var item = new T.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback); //item.disable(); menu.addItem(item); if (i == 1 || i == 3) { //添加分割线 menu.addSeparator(); } } //装载菜单 map.addContextMenu(menu); //定位回调函数 fn = function(e) { //当前为移动端时 if (this.getStatus() == 0) { map.centerAndZoom(e.lnglat, 15) console.log(e); //获取地理位置信息并设置到标注 getDetailLocation(e.lnglat, e.lnglat); } //当前为PC端时 if (this.getStatus() == 1) { map.centerAndZoom(e.lnglat, e.level) console.log(e); //获取地理位置信息并设置到标注 getDetailLocation(e.lnglat, e.lnglat); } } //设置标注 function setMarker(e) { var marker = new T.Marker(e); map.addOverLay(marker); var markerInfoWin = new T.InfoWindow("" + detaillocation); marker.addEventListener("click", function() { marker.openInfoWindow(markerInfoWin); }); } //通过经纬度获取详细地址 function getDetailLocation(lnglat_lng, lnglat_lat) { $.ajax({ url: "https://api.tianditu.gov.cn/geocoder", type: 'GET', contentType: "application/json;charset=utf-8", data: { tk: mapKey, type: "geocode", postStr: "{'lon':" + lnglat_lng.lng + ",'lat':" + lnglat_lat.lat + ",'ver':1}" }, success: (data) => { var addressdata = eval("(" + data + ")"); console.log(addressdata); //截取地址信息显示在span上 detaillocation = addressdata.result.formatted_address; $("#localInfo").text(detaillocation + "->" + (new Date()).toLocaleDateString()); $("#zuobiao").text("坐标->"+lnglat_lng.lng+","+lnglat_lat.lat); console.log(detaillocation); if (addressdata.msg == "ok" && addressdata.status == 0) { //将位置信息设置到标注 setMarker(lnglat_lat); } else { //dosomething } }, error: (er, er1, er2) => { alert("获取失败"); } }); } //开始定位 lo.getCurrentPosition(fn); } </script> </body> </html>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
