腾讯地图 | 乐趣区

关于腾讯地图:腾讯位置服务个性化图层创建及发布

腾讯位置服务控制台首先在腾讯位置服务管制台下注册结束后，关上个性化款式抉择一个本人喜爱的款式作为模板，在这个模板的根底上对地图因素的款式进行批改，放慢地图设计的速度。本次案例主题是【中国红】，然而鉴于“玉露”和“澹月”主题是企业客户专项，这里就选“烟翠”这个主题，这个主题有“深厚的灰调，柔和的色调搭配，更能体现建筑物的立体感”。可供编辑的因素按因素类型分有POI（点），背景线、路线（线），背景面（面）四种，每个大类外面有一些具体分类。海洋把海洋改成玉红（#c04851）绿地、公园绿地、公园改成金莺黄（#f4a83a）水系水系改成瓜瓤粉（#f9cb8b）国家名设置国家名文字填充和描边，都用米色（#f9e9cd）这样一幅本人设置的个性化就根本设置好了，小伙伴们如果有其它类型的因素设置须要，能够进一步的设置。重命名、保留、公布在左上角进行重命名，而后保留、公布这个款式。款式批改前后比照利用到API key中接下来将利用到API key中，以便于后续利用的应用。点击提交就行啦。不过，须要留神的是，目前JavaScriptAPI仅反对预设款式（款式抉择>间接应用），暂不反对应用自定义款式（款式抉择>款式编辑），腾讯地图将在后续版本提供反对，敬请期待！最初，欢送应用腾讯位置服务，体验不同格调地图！作者：DomicZhong 链接：https://blog.csdn.net/DomicZh... 起源：CSDN 著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。

关于腾讯地图:使用腾讯位置服务实现类滴滴汽车沿轨迹行驶功能

前言最近公司有个地图功能开发，依据车辆的行驶的经纬度，来画出车辆的挪动轨迹，并模仿车辆在该线路的行驶过程。效果图大抵是这样的。繁难入门首先进入腾讯位置服务页面而后进行注册账号，注册实现后须要申请AppKey，咱们将在本人的利用中配置这个Key来应用SDK中的服务。 webserveapi默认勾选就能够，在未上线之前，咱们能够先不填域名白名单。只须要在html的页面里引入即可 <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=你刚申请的key"></script>一个实现的例子 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>创立地图</title></head><script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script><style type="text/css"> html, body { height: 100%; margin: 0px; padding: 0px; } #container { width: 100%; height: 100%; }</style><body onload="initMap()"> <div id="container"></div> <script type="text/javascript"> function initMap() { var center = new TMap.LatLng(39.984104, 116.307503); //初始化地图 var map = new TMap.Map("container", { rotation: 20,//设置地图旋转角度 pitch: 30, //设置俯仰角度（0~45） zoom: 12,//设置地图缩放级别 center: center//设置地图中心点坐标 }); } </script></body></html>把下面这段代码保留到html文件中，用浏览器关上，就能够看到一个地图,如下：实现需求：汽车行驶在地图上咱们要想让车在地图上跑起来，首先要画出一条线。由点连线有了地图之后，咱们要在地图上划线的话须要用到这个MultiPolyline这个类，折线。折线个别用于静止轨迹显示、路线布局显示等场景中。这个类是以图层的形式对折线进行单条或批量绘制，以及删改等操作。你能够在地图上创立，批改，删除。 var path = [ new TMap.LatLng(39.98481500648338, 116.30571126937866), new TMap.LatLng(39.982266575222155, 116.30596876144409), new TMap.LatLng(39.982348784165886, 116.3111400604248), new TMap.LatLng(39.978813710266024, 116.3111400604248), new TMap.LatLng(39.978813710266024, 116.31699800491333)];var polylineLayer = new TMap.MultiPolyline({ map, // 绘制到指标地图 // 折线款式定义 geometries: [{ styleId: 'style_blue', paths: path }],});代码效果图 ...

关于腾讯地图:腾讯位置服务GPS轨迹录制安卓篇

前言在地图的应用中，尤其在导航场景下，进行GPS轨迹录制是十分必要并且有用的，本文会对于安卓零碎下的轨迹录制局部做一个分享。零碎架构对于一个GPSRecordSystem（GPS轨迹录制零碎）次要分成3个局部：开始录制，录制GPS定位，完结录制并存储，如上图右方所示。在理论利用中，以导航系统为例：（1）在开始导航时（start navi）,进行录制工作的相干配置；（2）收到安卓零碎的onLocationChanged的callback进行GPSLocation的记录；（3）完结导航（stop navi）时，进行记录并存入文件。相干代码展现用到的相干变量 private LocationManager mLocationManager; // 零碎locationManager private LocationListener mLocationListener; // 零碎locationListener private boolean mIsRecording = false; // 是否正在录制 private List<String> mGpsList; // 记录gps的list private String mRecordFileName; // gps文件名称开始录制开始录制个别是在整个零碎工作之初，比方在导航场景下，当“开始导航”时，能够开始进行“startRecordLocation” 的配置 public void startRecordLocation(Context context, String fileName) { // 曾经在录制中不进行录制 if (mIsRecording) { return; } Toast.makeText(context, "start record location...", Toast.LENGTH_SHORT).show(); // 初始化locationManager和locationListener mLocationManager = (LocationManager) context.getSystemService(Context.LOCATION_SERVICE); mLocationListener = new MyLocationListener(); try { // 增加listener mLocationManager.requestLocationUpdates(LocationManager.GPS_PROVIDER, 0, 0, mLocationListener); } catch (SecurityException e) { Toast.makeText(context, "start record location error!!!", Toast.LENGTH_SHORT).show(); Log.e(TAG, "startRecordLocation Exception", e); e.printStackTrace(); }// 记录文件名称，笔者这里应用“realLocationRecord + routeID”模式进行记录 mRecordFileName = fileName; if (!mRecordFileName.endsWith(".gps")) { mRecordFileName += ".gps"; } mIsRecording = true; }录制中记录轨迹记录location个别是在获取安卓零碎onLocationChanged回调时调用“recordGPSLocation” public void recordGPSLocation(Location location) { if (mIsRecording && location != null) { // 记录location to list mGpsList.add(locationToString(location)); } }locationToString工具办法 ...

关于腾讯地图:小白入门必看-‘微信小程序地图定位开发教程‘

前言目前腾讯位置服务提供路线布局、地图选点、地铁图、城市选择器插件四款插件产品，本篇博客次要针对地图选点性能进行实现。开明腾讯位置服务1、进入微信公众平台 2、登录进入小程序后盾，抉择 “开发 - 开发工具 - 腾讯位置服务” 3、点击 “开明”，进入受权扫码界面 4、应用微信扫码进行受权 5、绑定开发者账号接入插件1、在小程序后盾，抉择 “设置 - 第三方设置 - 插件治理”，点击 “增加插件” 2、搜寻 “腾讯位置服务地图选点” 进行增加开发者密钥配置1、申请开发者密钥 2、设置KEY的 “启用产品” a、勾选微信小程序，设置受权 APP ID 受权 APP ID 能够通过 “设置 - 根本设置” 的账号信息进行查看 b、勾选 “WebService API” 小程序插件须要应用WebService API的局部服务，所以须要给应用该性能的KEY配置相应权限。如果填写了域名白名单，须要把servicewechat.com域名增加进域名白名单中，否则小程序下将无奈失常应用WebServiceAPI服务。插件的应用1、引入插件地图选点appId： wx76a9a06e5b4e693e // app.json{ "plugins": { "chooseLocation": { "version": "1.0.5", "provider": "wx76a9a06e5b4e693e" } }} 2、设置定位受权地图选点插件须要小程序提供定位受权才可能失常应用定位性能 // app.json{ "permission": { "scope.userLocation": { "desc": "你的地位信息将用于小程序定位" } }}3、代码实现 ...

关于腾讯地图:数据可视化API之热力图实现

前言数据可视化API（Web），是基于腾讯位置服务JavaScript API GL实现的业余天文空间数据可视化渲染引擎。通过这套API，能够实现轨迹数据、坐标点数据、热力、迁徙、航线等空间数据的可视化展示。应用步骤1、注册成为腾讯位置服务开发者，并进入控制台 -> key治理界面创立key； 2、数据可视化API（以下简称可视化API），所提供的可视化成果是以图层的形式叠加在JavaScript API GL之上，图层中所显示的数据由实例化的对象对立治理。 3、加载可视化API 可视化API是以 Javascript API GL 的附加库的模式加载的，请确保：引入时须传入&libraries=visualization参数（查看： Javascript API GL加载参数阐明） <script src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY&libraries=visualization"></script>利用场景热力求以色彩来体现数据强弱大小及散布趋势，能够用在出行、游览、警务平安、城市规划和钻研等多方面。代码大家可通过参考手册先理解下参数详情。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>3D经典热力</title></head><script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=visualization"></script><style type="text/css"> html, body { height: 100%; margin: 0px; padding: 0px; } #container { width: 100%; height: 100%; }</style><body onload="initMap()"> <div id="container"></div> <script src="https://mapapi.qq.com/web/lbs/visualizationApi/demo/data/heat.js"></script> <script> function initMap() { var center = new TMap.LatLng(39.909897147274364, 116.39756310116866); //初始化地图 var map = new TMap.Map("container", { zoom: 12,//设置地图缩放级别 pitch: 45, // 设置地图俯仰角 center: center,//设置地图中心点坐标 mapStyleId: "style1" //个性化款式 }); //初始化热力求并增加至map图层 new TMap.visualization.Heat({ max: 180, // 热力最强阈值 min: 0, // 热力最弱阈值 height: 40, // 峰值高度 radius: 30 // 最大辐射半径 }) .addTo(map) .setData(heatData);//设置数据 } </script></body></html>效果图 ...

关于腾讯地图:小程序下的地图还能这么玩你知道吗

近几年来小程序生态的飞速发展大家都引人注目，随着小程序与线下场景的联合日益严密，地图类性能曾经成为越来越多小程序的“标配”。腾讯位置服务始终在为微信和小程序提供底层的地图反对。同时，咱们也始终在与微信紧密配合，一直夯实丰盛咱们在小程序下的地图能力，降级开发者的“工具箱”和“武器库”，满足小程序开发者在不同业务场景下对地图能力的需要。 Map API性能全新降级近期小程序在Map API中新增多项性能，其中蕴含moveAlong、addGroundOverlay等。 moveAlongmoveAlong 帮忙开发者实现指定门路挪动 Marker，并且Marker朝向能够配合路线朝向旋转的成果，次要利用于轨迹回放、出行司乘同显等场景。若动画进行中，对同一 marker 再次调用 moveAlong 办法，前一次的动画将被打断。同时还能够通过设置平滑挪动的工夫 duration，实现轨迹回放快慢的设置。 initMarkerClusterinitMarkerCluster 即点聚合能力，当地图上须要展现的 marker 过多，可能会导致界面上 marker 呈现压盖，展现不全，并导致整体性能变差、用户应用卡顿的状况。针对此类问题，推出点聚合能力，将大量Maker 通过聚合的形式进行展现。比方大型连锁店场景，当用户查找区域甚至是一座城市的某品牌连锁店时，当地图放大层级总览全城时，点聚合能力能够使地图上的点位主动相邻合并达到最佳展现成果。 openMapAppopenMapApp 用来间接调起用户装置的地图App列表，相似微信发送地位时的场景，实现用户跳转其余地图App实现路线布局或导航的需要。以往的应用场景中，用户无奈间接通过小程序跳转地图APP，须要先返回微信选点再跳转app，不仅步骤繁琐同时跳转到地图App时并没有携带起起点地位，根本无法实现路线布局。目前此性能能够完满解决该问题，用户能够间接在本人的小程序拉起地图App并展示从终点至起点的路线布局。 fromScreenLocation 与 toScreenLocation小程序提供一组新的api，帮忙开发者实现屏幕坐标和经纬度的相互转换。fromScreenLocation能够获取屏幕上的点对应的经纬度，toScreenLocation能够获取经纬度对应的屏幕坐标。 includePointsincludePoints 即缩放视线展现所有POI。当地图存在多个 POI 点位、地图只显示了局部点位时，通过 includePoints 能力即可实现地图视线级别主动缩放蕴含所有点位的成果，并且能够通过 padding 设置坐标点造成的矩形边缘到地图边缘的间隔，达到最佳显示成果。 Map组件优化地图视线管制小程序Map组件的地图视线管制反对缩放、俯仰、3D楼快等控件，还反对通过向左向右、放大放大等传统手势管制地图视线变动。同时近期新增的“缩放级别”性能，能够管制 3-20 级别的视线缩放范畴，防止用户过大或过小的扭转地图视线导致地图展现成果不佳，影响用户体验。覆盖物-彩虹线新增了彩虹线能力。在路线布局场景，开发者能够通过使用该能力反馈路线拥挤状况，红色拥挤、黄色疾驶、绿色畅通。彩虹线作为线条属性与实线、虚线三者互相抵触。地图检索全面上架要想搭建残缺的LBS利用，除了地图展现性能外还离不开地图检索能力。咱们在微信凋谢社区的服务平台上线了一系列服务，蕴含4个POI数据类（逆地址解析、地址解析、地点搜寻、关键词输出提醒）、2个路线布局类（驾车路线布局、步行路线布局）、1个坐标工具类（坐标转换），笼罩了绝大部分地图利用场景。思考到泛滥开发者有拓展微信小程序海内市场的需要，咱们也在腾讯位置服务官网提供了海内地位接口服务，蕴含了地图、定位、地址解析、逆地址解析、地点搜寻、周边搜寻、周边举荐、路线布局八种海内服务能力。开发者一次接入即可享受海内外地图无缝切换的极致体验，做到“一次接入、通达寰球”。路线布局插件优化降级路线布局插件近期迭代了导航、实时公交、主题色等多项能力。导航：如果说路线布局是为了“看路线”，那么导航就是为了“用路线”。新增的导航能力欠缺了路线布局只能看不能用的难堪位置，买通了输出目的地—>抉择最优路线—>跳转导航的惯例驾车流程，用户点击导航能够拉起地图App，实现小程序与地图App的无缝链接。实时公交：目前在腾讯位置服务对外开放的产品中，只有路线布局插件提供了实时公交能力。开发者能够帮忙用户理解最近一辆公交到站工夫和所剩站数。实时公交晋升了插件在公共出行畛域的服务能力，让用户不再“等公交”。主题色：开发者能够通过设置主题色的形式，整体更改插件中的字体、线条、按钮、色块等色彩。更改后的插件格调可能完满融入开发者的小程序中，使其整体格调保持一致，再也不会因为插件色彩的突兀而升高用户体验感触。个性化底图反对动静切换个性化底图切换能力上线，能够实现在小程序内应用同一subkey，通过 layer-style（地图官网设置的款式 style 编号）属性抉择不同的底图格调，并能够动静切换款式。比方白天应用浅色系地图，夜晚应用微信深色地图。以上面的Demo为例，能够实现四种style格调动静切换，style1-出行、style2-微信深色、style3-澹月、style4-玉露。示例核心小程序 - 小程序地图开发的最佳助手为了帮忙小程序开发者更好的理解并且应用这些地图能力，咱们专门开发了一个示例核心小程序，它有两大作用： ...

关于腾讯地图:腾讯位置服务elementui-实现地址搜索marker标记功能

前言小程序我的项目须要实现输出地址搜寻解析出相应经纬度并在地图上打点标注。后期筹备1、申请腾讯位置服务key 2、npm install qqmap --save 引入须要的js文件在App.vue中输出 <script type="text/javascript" src="http://map.qq.com/api/js?v=2.exp&key=申请的key"></script><script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>新建TMap.js文件import maps from 'qqmap';export function TMap() { return new Promise(resolve => { maps.init(申请的key, () => { resolve(maps); }); });}新建map.vue文件<template> <div id="container"></div></template><script>/* eslint-disable */import { TMap } from "./TMap"; export default { name: "mapChild", data() { return {}; }, created() { let _this = this; TMap().then(qq => { //初始化中心点，传入想要设置的值 this.mapInit(经度, 纬度, 缩放比例); }); }, methods: { //父组件调用该函数，设置地点 setLoc(lng, lat) { this.mapInit(lng, lat, 16); }, //搜寻某一地点名 getLoc(ele) { this.$axios({ url: url, //间接应用腾讯的搜寻api的话会报跨域谬误 //我是通过node服务端作为代理去申请数据 //所以这里就不放出理论ip地址了哈 //在最初我会将node局部的代码也加上 method: "get", params: { address: ele } }) .then(res => { let searchObj = res.data.data; searchObj.search = 1; this.$emit("mapSend", searchObj); let _this = this; let resultData = res.data.data.data[0]; if (res.data.data.status == 0) { this.mapInit(resultData.location.lng, resultData.location.lat, 16); } }) .catch(error => { console.log(error); }); }, //依据传入的值渲染地图及传出经纬度和地名 mapInit(lng,lat,zoom) { let _this = this var map = new qq.maps.Map(document.getElementById("container"), { // 地图的核心地理坐标。 center: new qq.maps.LatLng( lat, lng ), zoom: zoom }); var marker = new qq.maps.Marker({ position: new qq.maps.LatLng( lat, lng ), map: map }); qq.maps.event.addListener(map, "click", function(event) { marker.setMap(null); }); qq.maps.event.addListener(map, "click", function(event) { let result = { status: 0, result: { location: { lng: event.latLng.getLng(), lat: event.latLng.getLat() } } }; qq.maps.event.addListener(map, "click", function(event) { marker.setMap(null); }); var marker = new qq.maps.Marker({ position: event.latLng, map: map }); _this .$axios({ url: url, //这里的url跟下面也是雷同的问题 method: "get", params: { location: event.latLng.getLat() + "," + event.latLng.getLng() } }) .then(res => { res.data.data.extra = 1; _this.$emit("mapSend", res.data.data); }) .catch(err => { this.$message({ type: 'warning', message: '定位解析失败' }) }) }); } },};</script><style>#container { min-width: 600px; min-height: 400px;}</style>以上就实现了子组件的创立，而后就能够在父组件中引入并应用 ...

关于腾讯地图:腾讯位置服务地图SDK公交路线规划应用示例2

前言持续上一次的Demo，本次增加了同一路线的多条不同的公交线路展现，默认显示第0条。并且通过点击公交路线来切换选中的路线。上篇参考：腾讯位置服务地图SDK公交路线布局利用示例应用场景公交路线布局筹备腾讯位置服务iOS地图SDK 路线切换1、创立QPolyline的子类，用于辨别步行局部和公交局部。 @interface RoutePlanWalkingPolyline : QPolyline@end@interface RoutePlanBusingPolyline : QPolyline// 判断以后路线是否曾经被选中@property (nonatomic, assign) BOOL isSelected;@end2、在创立路线Mode时，通过判断路线的品种来创立不同的模型，并且默认选中第0条路线。 /* 1. 默认抉择第一个公交车线路 2. 以后公交车线路 alpha = 1，有箭头 3. 备用公交车线路 alpha = 0.5，无箭头 4. 点击备用公交车线路能够切换 */// 驾车蚯蚓线// 遍历所有驾车路线for (int i = 0; i < plan.lines.count; i++) { QMSBusingRouteTransitLine *line = plan.lines[i]; CLLocationCoordinate2D coords[line.polyline.count]; for (int i = 0; i < line.polyline.count; i++) { NSValue *value = line.polyline[i]; CLLocationCoordinate2D coord = [value coordinateValue]; coords[i] = coord; } RoutePlanBusingPolyline *busPolyline = [[RoutePlanBusingPolyline alloc] initWithCoordinates:coords count:line.polyline.count]; busPolyline.isSelected = i==0 ? YES : NO; [self.mapView addOverlay:busPolyline]; [self.selectRouteOverlayArray addObject:busPolyline];}3、在增加折线视图时，额定增加判断以后的公交模型是否曾经被选中的步骤。 ...

关于腾讯地图:腾讯位置服务地图SDK公交路线规划应用示例

前言明天分享腾讯位置服务地图SDK检索性能的利用，应用公交路线布局性能实现Demo，临时还没有做同一路线不同公交线路切换性能（后续欠缺此Demo）。应用场景公交路线布局筹备腾讯位置服务iOS地图SDK 公交路线布局检索后果的数据阐明1、检索后果：QMSBusingRouteSearchResult中的NSArray *routes属性蕴含了检索到的后果，每个后果都是一个独立的公交出行计划QMSBusingRoutePlan。 2、公交出行计划：QMSBusingRoutePlan，示意从终点到起点的残缺出行布局属性阐明CGFloat distance计划的总间隔CGFloat duration计划的预估工夫NSString *bounds计划的西南、东北坐标，用于调整地图视角显示路线NSArray <QMSBusingSegmentRoutePlan *> *steps总路线的分段信息（蕴含步行、公交，其中公交可能蕴含多个计划）3、出行计划的分段路线布局属性阐明NSString *mode"WALKING":步行"TRANSIT":公交标记该分段的出行形式CGFloat distance分段的间隔CGFloat duration分段的预估工夫CGFloat price如果是公交或者地铁，须要破费的金额，元CNSString *direction方向形容，如果为步行，表白为向哪个方向走NSArray *polyline分段路径坐标点（这里必须说一下，腾讯地图SDK应用的是CLLocationCoordinate2D的encode类型，因而还须要decode能力应用）NSArray *lines如果是公交，并且有多个线路能够乘坐的话，该数组就会蕴含多个路线：QMSBusingRouteTransitLine4、公交线路布局：QMSBusingRouteTransitLine，到这里才是最麻烦的中央，因为是一个线路的不同计划属性阐明NSString *vehicle交通工具：公交、地铁NSString *id_应该是个标记，没发现作用CGFloat distance间隔NSTimeInterval duration预计乘坐工夫NSString *title车名：如333路、软件园通勤车等NSArray *polyline路径坐标点NSInteger station_count路径站的数目NSArray<QMSBusStation *> *stations路径站的站名QMSStationEntrance *destination目的地的地址，也就是属于哪个街道QMSBusStation *geton上车车站QMSBusStation *getoff下车车站公交路线布局的具体阐明1、公交路线布局的终点和起点坐标的检索（不反对地名检索） 1）SDK检索参数并不反对地名检索，只有坐标检索，因而要应用检索性能就必须先通过POI检索性能来获取终点和起点的坐标地位： - (IBAction)searchButtonClicked:(UIButton *)sender { _startPoiData = nil; _endPoiData = nil; // 终点：腾讯北京总部 _startPoiOption = [[QMSPoiSearchOption alloc] init]; _startPoiOption.keyword = _startPointTextField.text; [_startPoiOption setBoundaryByRegionWithCityName:@"北京" autoExtend:NO]; [self.mapSearcher searchWithPoiSearchOption:_startPoiOption]; // 起点：西二旗地忒站 _endPoiOption = [[QMSPoiSearchOption alloc] init]; _endPoiOption.keyword = _endPointTextField.text; [_endPoiOption setBoundaryByRegionWithCityName:@"北京" autoExtend:NO]; [self.mapSearcher searchWithPoiSearchOption:_endPoiOption];}- (void)searchWithPoiSearchOption:(QMSPoiSearchOption *)poiSearchOption didReceiveResult:(QMSPoiSearchResult *)poiSearchResult { if (poiSearchOption == _startPoiOption) { _startPoiData = poiSearchResult.dataArray.firstObject; } else { _endPoiData = poiSearchResult.dataArray.firstObject; } // 增加终点起点前，先打消之前的大头针 [self.mapView removeAnnotations:self.mapView.annotations]; // 设置终点和起点 QPointAnnotation *startPointAnnotation = [[QPointAnnotation alloc] init]; startPointAnnotation.coordinate = _startPoiData.location; [self.mapView addAnnotation:startPointAnnotation]; QPointAnnotation *endPointAnnotation = [[QPointAnnotation alloc] init]; endPointAnnotation.coordinate = _endPoiData.location; [self.mapView addAnnotation:endPointAnnotation]; // 发动公交路线布局检索 [self searchBusRoute];}2）通过终点和起点POI数据来发动公交路线布局检索 ...

关于腾讯地图:腾讯位置服务地图SDK自定义路况和字体

应用场景自定义路况是用于帮忙批改路况的色彩和宽度，因为地图外部字体对立的，如果想要批改款式就能够通过相干文字接口进行定义外围类和接口类接口阐明TrafficStylesetCongestedStrokeColor设置路况拥挤的描边色彩 setSeriousCongestedColor设置路况极度拥挤的色彩 setSeriousCongestedStrokeColor设置路况极度拥挤的描边色彩 setSlowColor设置路况慢行的色彩 setSlowStrokeColor设置路况疾驶的描边色彩 setSmoothColor设置路况畅通的色彩 setSmoothStrokeColor设置路况畅通描边的色彩 setStrokeWidth设置路况描边色彩的宽度 setWidth设置路况填充色彩的宽度TencentMapOptionssetTrafficStyle设置路况款式 setTypeface设置自定义字体外围点解说一、设置自定义路况1、初始化TrafficStyle并配置相干属性 TrafficStyle trafficStyle = new TrafficStyle(); //设置路况极度拥挤的色彩 trafficStyle.setSeriousCongestedColor(0xff92000a); //设置路况拥挤的色彩 trafficStyle.setCongestedColor(0xffea0312); //设置路况慢行的色彩 trafficStyle.setSlowColor(0xffff7508); //设置路况畅通的色彩 trafficStyle.setSmoothColor(0xff00a209); //设置路况填充色彩的宽度 trafficStyle.setWidth(10);2、把TrafficStyle赋值到TencentMapOptions上 TencentMapOptions tencentMapOptions = new TencentMapOptions(); tencentMapOptions.setTrafficStyle(trafficStyle);3、显示到地图上 MapView mapView = new MapView(getApplicationContext(), tencentMapOptions);二、设置自定义字体1、批改文字款式 tencentMapOptions.setTypeface(Typeface.DEFAULT_BOLD);实现成果路况文字留神1、须要在地图初始化的时候传入，初始化当前就无奈更改了 2、自定义完路况后须要开启路况，因为地图默认是不开启的作者：CT_YJ链接：https://my.oschina.net/u/4860... 起源：OSCHINA 著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。

关于腾讯地图:腾讯位置服务地图SDK自定义地图和路况

前言1、自定义路况地图SDK个别的路况色彩都是雷同的，如路线畅通为绿色、路线迟缓为黄色、路线拥挤为红色，然而通常都无奈让用户自定义路况色彩。腾讯地图iOS SDK在4.3.9.1版本提供了自定义路况色彩性能，能够自定义路况的畅通拥挤色彩。2、自定义地图腾讯地图SDK在提供了根底配色的状况下，还反对自定义色彩，能够将如绿地、路线、河流等元素批改为本人指定的色彩，实现了高度自定义。应用场景1、自定义路线路况色彩 2、自定义地图元素色彩筹备1、腾讯地图iOS SDK 2、腾讯地图控制台自定义地图款式接入流程1、自定义路况： 1)、创立QMapView时增加配置：通常创立地图对象时间接应用的initWithFrame:办法，而QMapView还提供了另一个能够增加配置的办法// QMapConfig提供了一个初始化办法，这个办法能够用于设置一个辅助Key// - (instancetype)initWithSubID:(NSString *)subID subKey:(NSString *)subKey;QMapConfig *config = [[QMapConfig alloc] init];QMapView *mapView = [[QMapView alloc] initWithFrame:self.view.bounds config]:2)、创立路况款式对象，并设置路况色彩： QMapConfig *config = [[QMapConfig alloc] init];QTrafficStyle *style = [[QTrafficStyle alloc] init];// 对立描边色彩UIColor *whiteColor = [UIColor colorWithRed:255/255.0 green:255/255.0 blue:255/255.0 alpha:1];// 交通顺畅色彩：青绿色style.smoothColor = [UIColor colorWithRed:138/255.0 green:217/255.0 blue:28/255.0 alpha:1];// 交通顺畅描边色彩style.smoothBorderColor = whiteColor;// 交通迟缓色彩：黄色style.slowColor = [UIColor colorWithRed:244/255.0 green:247/255.0 blue:89/255.0 alpha:1];// 交通迟缓描边色彩style.slowBorderColor = whiteColor;// 交通拥堵配色：橘色style.congestedColor = [UIColor colorWithRed:250/255.0 green:154/255.0 blue:0 alpha:1];style.congestedBorderColor = whiteColor;// 交通十分拥挤色彩：红色style.seriouseCongestedColor = [UIColor colorWithRed:255/255.0 green:0 blue:0 alpha:1];// 交通十分拥挤描边色彩style.seriouseCongestedBorderColor = whiteColor;// 路况线宽style.lineWidth = 2;config.trafficStyle = style;3)、图片示例（西直门经典拥挤路段） ...

关于腾讯地图:基于echarts实现3D地图的定时高亮和点击事件

技术选型文章所选技术栈：vue、echarts、echarts-gl 装置Vue和echarts1、装置echarts和echarts-al npm i echarts --save npm i echarts-gl --save2、援用echarts和echarts-gl import echarts from 'echarts';import 'echarts-gl'Vue.prototype.$echarts = echarts3、页面引入 require('../../node_modules/echarts/map/js/china')此时地图音讯就在你的node_modules/echarts/map/china中初始化echarts-gl 3D地图1、新建一个option.js 这个文件是用来放配置项的，不建设也能够，然而页面代码多会不不美观 2、配置页代码如下 (次要是地点标识和3D地图的色彩款式) //标识数据,用来标识地图上的点，给用户提供点击事件var geoCoordMap = { '黑龙江': [127.9688, 45.368], '内蒙古': [110.3467, 41.4899], "吉林": [125.8154, 44.2584], '北京市': [116.4551, 40.2539], "辽宁": [123.1238, 42.1216], "河北": [114.4995, 38.1006], "天津": [117.4219, 39.4189], "山西": [112.3352, 37.9413], "陕西": [109.1162, 34.2004], "甘肃": [103.5901, 36.3043], "宁夏": [106.3586, 38.1775], "青海": [101.4038, 36.8207], "新疆": [87.9236, 43.5883], "西藏": [91.11, 29.97], "四川": [103.9526, 30.7617], "重庆": [108.384366, 30.439702], "山东": [117.1582, 36.8701], "河南": [113.4668, 34.6234], "江苏": [118.8062, 31.9208], "安徽": [117.29, 32.0581], "湖北": [114.3896, 30.6628], "浙江": [119.5313, 29.8773], "福建": [119.4543, 25.9222], "江西": [116.0046, 28.6633], "湖南": [113.0823, 28.2568], "贵州": [106.6992, 26.7682], "云南": [102.9199, 25.4663], "广东": [113.12244, 23.009505], "广西": [108.479, 23.1152], "海南": [110.3893, 19.8516], '上海': [121.4648, 31.2891]};var chinaDatas = [ [{ name: '黑龙江', value: 100 }], [{ name: '内蒙古', value: 300 }], [{ name: '吉林', value: 300 }], [{ name: '辽宁', value: 300 }], [{ name: '河北', value: 300 }], [{ name: '天津', value: 300 }], [{ name: '山西', value: 300 }], [{ name: '陕西', value: 300 }], [{ name: '甘肃', value: 300 }], [{ name: '宁夏', value: 300 }], [{ name: '青海', value: 300 }], [{ name: '新疆', value: 300 }], [{ name: '西藏', value: 300 }], [{ name: '四川', value: 300 }], [{ name: '重庆', value: 300 }], [{ name: '山东', value: 300 }], [{ name: '河南', value: 300 }], [{ name: '江苏', value: 300 }], [{ name: '安徽', value: 300 }], [{ name: '湖北', value: 300 }], [{ name: '浙江', value: 300 }], [{ name: '福建', value: 300 }], [{ name: '江西', value: 300 }], [{ name: '湖南', value: 300 }], [{ name: '贵州', value: 300 }], [{ name: '广西', value: 300 }], [{ name: '海南', value: 300 }], [{ name: '上海', value: 1300 }]];//解决数据,是的数据格式合乎echartsvar convertData = function(data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i][0].name]; if (geoCoord) { res.push({ name: data[i][0].name, value: geoCoord.concat(data[i][0].value) }); } } return res;};//具体配置，并输入export default { backgroundColor: '#fff', geo3D: { data: convertData(chinaDatas), map: 'china', color: '#fff', roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。 itemStyle: { areaColor: 'rgba(255,255,255,1)', opacity: 1, borderWidth: 1, borderColor: '#000' }, //地图上每个省的色彩配置 label: { show: false, },// 标特是否显示，显示配置 emphasis: { //当鼠标放上去的状态 label: { show: true }, itemStyle: { color: '#000' } }, tooltip: 'axis', //提示框设置 formatter: val => { return val }, /** 标签内容格局器，反对字符串模板和回调函数两种模式，字符串模板与回调函数返回的字符串均反对用 \n 换行。**/ // legendHoverLink: true, regions: [{ name: '山东', itemStyle: { color: '#000', opacity: 1, }, label: { show: true }, }],//默认高亮区域 }, series: [{ name: 'light', type: 'scatter3D', //标识点 symbol: 'pin', //散点的形态。默认为圆形。 coordinateSystem: 'geo3D', data: convertData(chinaDatas), symbolSize: function() { return 36 }, label: { show: false }, itemStyle: { normal: { color: '#f00' } }, zlevel: 6, emphasis: { //当鼠标放上去地区区域是否显示名称 label: { show: false }, itemStyle: { color: '#000' } }, }, ]};3、引入option ...

关于腾讯地图:vue腾讯位置服务-实现坐标拾取器功能

需要1、搜寻具体地址，主动填写经纬度，并在地图上标记 2、点击地图上一点，可从新填写经纬度并且标记代码在dom新建div渲染地图<el-form-item label="店铺地址" prop="address"> <el-input v-model="fristForm.address"></el-input> <el-input class="long-lat" v-model="fristForm.longitude" placeholder="经度" ></el-input> <el-input class="long-lat" v-model="fristForm.latitude" placeholder="纬度" ></el-input> <el-button size="mini" type="primary" @click="searchKeyword" >搜寻</el-button ></el-form-item><span class="changeAddress">点击地图更换分店定位地址</span><div id="container" class="mapbox"></div>js定义地图变量并设置需要var searchService,geocoder,map,markersArray = [];<script>export default { mounted() { this.init(); }, methods:{ init() { var that = this; var center = new qq.maps.LatLng(39.916527, 116.397128); var map = new qq.maps.Map(document.getElementById("container"), { center: center, zoom: 13 }); var latlngBounds = new qq.maps.LatLngBounds(); qq.maps.event.addListener(map, "click", function(event) { console.log(event); that.fristForm.longitude = event.latLng.getLng(); // 经度 that.fristForm.latitude = event.latLng.getLat(); // 纬度 if (markersArray) { for (let i in markersArray) { markersArray[i].setMap(null); } } var marker = new qq.maps.Marker({ map: map, position: event.latLng }); markersArray.push(marker); }); geocoder = new qq.maps.Geocoder({ complete: function(result) { console.log(result); that.fristForm.longitude = result.detail.location.lng; that.fristForm.latitude = result.detail.location.lat; map.setCenter(result.detail.location); var marker = new qq.maps.Marker({ map: map, position: result.detail.location }); markersArray.push(marker); } }); }, }, // 搜寻地址 searchKeyword() { var keyword = this.fristForm.address; this.clearOverlays(markersArray); //依据输出的城市设置搜寻范畴 // searchService.setLocation("北京"); //依据输出的关键字在搜寻范畴内检索 if (keyword) { // searchService.search(keyword); geocoder.getLocation(keyword); } else { alert("请输出地址"); } },}</script>文档参考以上代码应用的是jsapi性能，目前对应性能已降级JavaScript API GL，地址解析性能可间接调取接口应用，欢送大家体验！ ...

关于腾讯地图:Swift接入腾讯位置服务地图SDK

前言腾讯地图iOS SDK目前只提供了Objective-C版本的SDK, 因而如果是Swift我的项目, 则须要本人通过Bridging文件来将其引入应用场景Swift我的项目接入腾讯地图接入流程1、创立Swift我的项目, 自己采纳的是StoryBoard创立的我的项目, 不过应用办法是一样的: 2、将SDK的framework和bundle导入我的项目中: 3、创立HeaderFile, 通常明明为"项目名称-Bridging-header", 即:TencentMapSwiftDemo-Bridging-header.h, 放在根目录(地位放在那里都能够, 区别只是门路不同): 4、进入我的项目配置, 抉择TARGETS-TencentMapSwiftDemo, 而后进入到Build Setting中. 在搜寻栏中搜寻Bridging, 并在Objective-C Bridging Header选项中输出: $(SRCROOT)/TencentMapSwiftDemo-Bridging-header.h($(SRCROOT)为快捷指令, 能够间接辨认我的项目的根门路): 如果编译没有出错, 则进行第五步, 否则请查看门路是否正确, 是否有多余的空格/换行等等, 比方下列报错, 就是自己在输出的时候不小心在最初加了一个空格导致的门路谬误: 5、编译通过的话就能够在BridgingHeader文件中导入Objective-C的框架了: #ifndef TencentMapSwiftDemo_Bridging_header_h#define TencentMapSwiftDemo_Bridging_header_h#import <QMapKit/QMapKit.h>#import <QMapKit/QMSSearchKit.h>#endif /* TencentMapSwiftDemo_Bridging_header_h */6、别忘了依据文档所示, 须要增加libsqlite3.tbd、libc++.tbd两个依赖库: 7、到此就能够应用地图SDK了, 首先在AppDelegate外面配置好Key: import UIKit@mainclass AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { QMapServices.shared().apiKey = "我的Key" QMSSearchServices.shared()?.apiKey = "我的Key" return true }}8、最初, 附加一段ViewController中的根本应用: ...

关于腾讯地图:基于UE4Unity绘制地图基础元素线下篇

基于UE4/Unity绘制地图根底元素-线（上篇）前言上篇中记录了绘制线的根本流程，而下篇次要是对绘制线中遇到的性能和成果问题进行论述。在绘制完一条线并且心愿给其加上描边款式时，会遇到不可避免的闪动问题。而在绘制大量的交织路线时，须要同时思考绘制性能和闪动问题如何解决。本文总结了高效绘制描边线的办法，并对调研过的解决Z-Fighting闪动的计划进行论述。像素圆角渲染的性能优化在上篇中介绍了逐像素剔除产生圆角的办法，概括的来说，为了达到动静圆滑的目标，将原来CPU中的数学计算移入了片元着色器中进行。这样做尽管能失去最圆滑的成果，却也给GPU带来了压力。以圆角线帽代码为例，受GPU解决形式影响，动静分支的if/else指令须要被全副执行，同时discard指令也会影响GPU的Early Z优化，二者都会对性能产生影响。 fixed4 frag (v2f i) : SV_Target{ if(i.geometryInfo.x < 0) // 终点侧线帽 { if(dot(float2(i.geometryInfo.x, i.geometryInfo.y), float2(i.geometryInfo.x, i.geometryInfo.y)) > 1) { discard; // 间隔圆心间隔大于1则剔除 } } else if(i.geometryInfo.x > 1) // 起点侧线帽 { if(dot(float2(i.geometryInfo.x - 1, i.geometryInfo.y), float2(i.geometryInfo.x - 1, i.geometryInfo.y)) > 1) { discard; } } return i.color; }因而在片元着色器中指令的性能优化上，次要是将其逻辑改为线性，移除动静分支，并以Alpha Blending代替discard。简化流程的次要工具是CG规范函数step/clamp/lerp，其定义如下，灵活运用这些函数就能够躲避动静分支。简化流程后的片元着色器代码如下，通过打消动静分支语句和discard指令缩小性能开销，就义局部代码的可读性，但晋升了并行效率。其中为了确定像素是否属于线帽结构了二次函数，实际上也能够结构其余类型的函数达到目标。 fixed4 frag (v2f i) : SV_Target{ fixed4 clearColor = 0; fixed isClear = 0; fixed origin = clamp(i.geometryInfo.z, 0 ,1); // 两侧线帽x值膨胀到0和1 fixed4 isCap = step(0, origin * (origin - 1)); // 构建二值函数，线帽为1，线段为0 fixed2 dist = fixed2(i.geometryInfo.z - origin, i.geometryInfo.w); // 构建间隔向量 isClear = step(1, dot(dist, dist)) * isCap; // 间隔小于1(不须要剔除)为0，间隔大于等于1(须要剔除)且是线帽像素，则为1 return lerp(i.color, clearColor, isClear); }绘制线的描边依据上篇实现一条线的绘制后，为了使线易于察看，通常须要使得线具备描边款式。实际上，上篇中展现的线曾经为了好看都带上了描边，但要让线有描边局部还须要进行额定的绘制。 ...

关于腾讯地图:基于UE4Unity绘制地图基础元素线上篇

前言这篇文章是应用游戏引擎摸索地图可视化的开篇。传统的地图渲染通常是在iOS/Android/Web平台进行的，为了探索更酷炫的地图展现，会记录基于UE4/Unity进行地图渲染的摸索过程。地图根底元素 - 线线作为地图渲染的根本元素，在地图中能够代表各种模式的路线。路线数据通常以离散点串模式存储，因而如何将点串绘制成有宽度的线是渲染最关注的问题。本文记录了绘制有宽度的线的办法，并对优化线展现成果的各种线帽和拐角进行了论述。绘制有宽度的线路线数据通常以离散点串和其对应线宽进行存储，为了在游戏引擎中进行显示，就须要将其扩大为有宽度的线。UE4和Unity都能够应用代码生成Mesh进行根本图元的渲染展现（UE4应用Procedural Mesh Component，Unity应用MeshFilter和MeshRenderer），而Mesh渲染的根本单位是三角形，因而问题就转化为如何依据点串和线宽，结构出一组三角形使其可能拼合产生具备宽度的线。对于只有两个点的直线，通过获取与直线垂直的向量，向两个方向各扩大lineWidth/2长度产生顶点，划分为三角形即可。而对于多个离散点形成的线，绘制的时候遇到2个问题：仅应用相邻点计算垂直向量，导致裁减出的线拐角处会有断裂，如下图所示。能够看到，仅仅每个相邻线段进行裁减是不够的，还须要思考如何解决线的拐角。思考解决线的拐角，但获取顶点裁减向量的方向和大小不对，导致绘制的线不等宽。下图依据相隔顶点连线的垂线确定裁减向量，但因向量随顶点地位变动而变动，因而不能作为生成等宽线的根据。有了下面的思考，工作就变成了裁减出等宽且有拐角的线：相隔点的顶点地位会变动，但由其确定的向量方向是不变的，因而依附顶点两侧线段的单位向量，就能确定出惟一的裁减向量。确定裁减方向后，还须要确定裁减向量的大小使得最终的线等宽。伪代码如下，裁减方向可由线段单位向量组合确定，须要留神裁减长度并不是lineWidth/2，而是须要依据线段夹角进行计算调整。裁减向量计算好之后，即可依据离散点串生裁减顶点，依据顶点坐标剖分为三角形，构建Mesh进行渲染。 // 计算裁减方向Vec2f a = (P1 - P0) * normalized()Vec2f b = (P2 - P1) * normalized()Vec2f avg = a + bVec2f direction = Vec2f(-avg.y, avg.x).normalized() //裁减方向为avg的垂直方向// 计算裁减长度float t = Abs(Asin(a × b)) / 2 // 单位向量叉乘取得夹角正弦float length = lineWidth / 2 / Cos(t) // 依据角度调整裁减长度绘制线帽LineCap依据上一节操作曾经能够绘制出有宽度的线，但也可能看出线在结尾和结尾处都是矩形，不够优雅好看。因而本节次要会解决绘制线帽的问题。较为罕用的LineCap次要有以下三种： Butt 无线帽模式，上一节绘制的线默认即为ButtRound 在线的两端增加额定的半圆，其半径为lineWidth/2Square 在线两端增加额定的矩形，其高度为lineWidth/2 Square模式的线帽绘制较为简单，只须要在结尾和结尾局部依据延长方向额定增加矩形即可，两个矩形能够很简略的划分为四个三角形，增加在画线mesh中一起渲染。而Round模式的半圆线帽在绘制上就麻烦了许多，在实际过程中次要摸索了以下三个计划： ...

关于腾讯地图:腾讯位置服务实现轨迹回放

前言在地图接入应用中，很多开发者征询咱们腾讯位置服务是否反对轨迹回放性能，所以明天特意将咱们JavaScript API GL的轨迹回放&小车挪动示例放到咱们本篇文章分享。轨迹回放&小车挪动在JavaScript API GL中，应用MultiMarker（点标记）中的moveAlong()办法，能够不便的实现轨迹回放性能，而且您能够对款式进行各种想要的批改，比方批改小车图片、不显示路线或者改成您想要的色彩等。代码//初始化地图var map = new TMap.Map("container", { zoom: 15, center: new TMap.LatLng(39.984104, 116.307503)}); //小车挪动路线var path = [ new TMap.LatLng(39.98481500648338, 116.30571126937866), new TMap.LatLng(39.982266575222155, 116.30596876144409), new TMap.LatLng(39.982348784165886, 116.3111400604248), new TMap.LatLng(39.978813710266024, 116.3111400604248), new TMap.LatLng(39.978813710266024, 116.31699800491333)]; //创立mareker（小车）var marker = new TMap.MultiMarker({ map, styles: { //款式设置 'car-down': new TMap.MarkerStyle({ 'width': 40, //小车图片宽度（像素） 'height': 40, //高度 'anchor': { //图片核心的像素地位（小车会放弃车头朝前，会以核心地位进行转向） x: 20,y: 20, }, 'faceTo': 'map', //取’map’让小车贴于高空，faceTo取值阐明请见下文图示 'rotate': 180, //初始小车朝向（正北0度，顺时针一周为360度，180为正南） 'src': './img/car.png', //小车图片（图中小车车头向上，即正北0度） }) }, geometries: [{ //小车marker的地位信息 id: 'car', //因MultiMarker反对蕴含多个点标记，因而要给小车一个id styleId: 'car-down', //绑定款式 position: new TMap.LatLng(39.98481500648338, 116.30571126937866),//初始坐标地位 }]}); //调用moveAlong，实现小车挪动marker.moveAlong({ "car": { //设置让"car"沿"path"挪动，速度70公里/小时 path, speed: 70 } }, { autoRotation:true //车头始终向前（沿路线主动旋转） })在线示例：https://lbs.qq.com/webDemoCen... ...

关于腾讯地图:3分钟搞定微信小程序类美团用户商家距离计算

前言小程序实操，间隔计算总结。思路一共有两种办法，各有利弊： 1.利用小程序的wx.getLocation 办法失去用户的经纬度,而后用已知的商家的经纬进行计算; 2.利用腾讯地图位置服务calculateDistance间接计算；先相熟下两个单词： longitude:经度; latitude:纬度; 下边是两种办法的具体实现一、获取用户的地位信息,再进行计算(wx.getLocation)1.小程序提供了获取用户地位信息的api，所以咱们能间接获取到经纬度; 2.在腾讯位置服务坐标拾取器，获取商家的具体经纬度(例：北京故宫博物院116.397027(经度),39.917990(纬度))； 3.利用公式进行两点的经纬度计算，需注意：小程序默认坐标系是wgs84，您需设置为gcj02再试；代码： Page({ data:{ }, onLoad: function() { var _this = this; _this.findXy() //查问用户与商家的间隔 }, findXy() { //获取用户的经纬度 var _this = this wx.getLocation({ type: 'gcj02', success(res) { _this.getDistance(res.latitude, res.longitude, 39.917990,116.397027) } }) }, Rad: function(d) { //依据经纬度判断间隔 return d * Math.PI / 180.0; }, getDistance: function(lat1, lng1, lat2, lng2) { // lat1用户的纬度 // lng1用户的经度 // lat2商家的纬度 // lng2商家的经度 var radLat1 = this.Rad(lat1); var radLat2 = this.Rad(lat2); var a = radLat1 - radLat2; var b = this.Rad(lng1) - this.Rad(lng2); var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))); s = s * 6378.137; s = Math.round(s * 10000) / 10000; s = s.toFixed(2) + '公里' //保留两位小数 console.log('经纬度计算的间隔:' + s) return s } )}## 二、利用腾讯地图的位置服务 ...

关于腾讯地图:腾讯地图获取全国行政区划检索列表Demo

前言全国行政区划检索性能, 因为高德和百度也没有提供一个比拟完满的解决方案, 因而应用了腾讯地图iOS SDK外部封装的Web接口来实现. 行政区划共分为三个等级, 省级/市级/区级, 对于北京市和天津市这样的城市, 通常间接认为是省级, 并间接以同样的内容来填充市级. 然而SDK外部并没有提供这样的填充, 因而须要自行再省级外面将其复制到市级。应用场景给用户提供抉择行政区域和居住地等性能的行政区划选择器。筹备腾讯地图3D SDK 行政区划检索外围代码- (void)searchWithDistrictSearchOption:(QMSDistrictBaseSearchOption *)districtSearchOption didRecevieResult:(QMSDistrictSearchResult *)districtSearchResult { _provinceModelArray = [NSMutableArray array]; NSArray *provinceArray = districtSearchResult.result[0]; NSArray *cityArray = districtSearchResult.result[1]; NSArray *districtArray = districtSearchResult.result[2]; for (QMSDistrictData *provinceData in provinceArray) { ProvinceModel *provinceModel = [ProvinceModel provinceWithDistrictData:provinceData]; // 取出市级 NSMutableArray *cityModelArray = [NSMutableArray array]; NSArray<NSNumber *> *cidx = provinceData.cidx; QMSDistrictData *cityData = cityArray[cidx.firstObject.intValue]; // 判断二级构造前面是否还有三级构造 // 如果没有, 则间接应用一级构造作为二级构造, 二级构造作为三级构造, 如: 北京-北京-东城区 if (cityData.cidx == nil) { CityModel *cityModel = [CityModel cityWithDistrictData:provinceData]; [cityModelArray addObject:cityModel]; // 设置三级构造 NSMutableArray *districtModelArray = [NSMutableArray array]; int firstIndex = provinceData.cidx.firstObject.intValue; int lastIndex = provinceData.cidx.lastObject.intValue; // 将二级构造设置为三级构造 for (int i = firstIndex; i < lastIndex + 1; i++) { QMSDistrictData *districData = cityArray[i]; DistrictModel *districtModel = [DistrictModel districtWithDistrictData:districData]; [districtModelArray addObject:districtModel]; } cityModel.districts = districtModelArray; provinceModel.cities = cityModelArray; } else { // 填充二级构造 int cityFirstIndex = provinceData.cidx.firstObject.intValue; int cityLastIndex = provinceData.cidx.lastObject.intValue; for (int i = cityFirstIndex; i < cityLastIndex + 1; i++) { QMSDistrictData *cityData = cityArray[i]; CityModel *cityModel = [CityModel cityWithDistrictData:cityData]; [cityModelArray addObject:cityModel]; // 设置三级构造 int districtFirstIndex = cityData.cidx.firstObject.intValue; int districtLastIndex = cityData.cidx.lastObject.intValue; NSMutableArray *districtModelArray = [NSMutableArray array]; for (int i = districtFirstIndex; i < districtLastIndex + 1; i++) { QMSDistrictData *districtData = districtArray[i]; DistrictModel *districtModel = [DistrictModel districtWithDistrictData:districtData]; [districtModelArray addObject:districtModel]; } cityModel.districts = districtModelArray; } provinceModel.cities = cityModelArray; } [_provinceModelArray addObject:provinceModel]; } _selectProvinceModel = _provinceModelArray[0]; _selectCityModel = _selectProvinceModel.cities[0]; _selectDistrictModel = _selectCityModel.districts[0]; [self setupPickerView];}以上就是外围代码，因为须要解析返回的行政区划的内容, 并且数据共有省市区三个数组, 对于北京市这样的非凡例子并没有第三个数组, 因而须要额定的步骤区拆分, 间接看局部代码可能有一些艰涩, 因而倡议同学们能够间接下载Demo尝试。 ...

关于腾讯地图:vue接入腾讯地图二标注定位实战

vue接入腾讯地图(一)【点击事件】请参考：https://segmentfault.com/a/1190000023890670 1、【标注】增加标注 var marker = new qq.maps.Marker({ position: myLatlng , map: map});文本标注 var marker = new qq.maps.Label({ position: myLatlng, map: map, content:'文本标注'});成果自定义标注图标 var anchor = new qq.maps.Point(300, 0), size = new qq.maps.Size(600, 680), origin = new qq.maps.Point(-150, 0), markerIcon = new qq.maps.MarkerImage( "/static/images/position.png", size, origin, anchor ); marker.setIcon(markerIcon);预览定位logo 官网预览https://lbs.qq.com/javascript_v2/case-run.html#sample-overlay-addmarkerimage 为什么会有这么大区别呢，因为这是图片的问题一个大一个小，还须要稍加调整，展现官网定位图片 2、【定位实战→qq.maps.Geolocation】引入js包（留神：vue我的项目得在首页的index.html外面引入）<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>//这个是固定的用这个链接就能够<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>三步走 <template> <div id="container" style="width:600px;height:500px;"></div></template><script> export default{ name:'news', data() { return { longitude:0,//经度 latitude:0,//纬度 city:'' } }, methods:{ //第一局部 //定位取得以后地位信息 getMyLocation() { var geolocation = new qq.maps.Geolocation("yourkey", "yourkey名称"); geolocation.getIpLocation(this.showPosition, this.showErr); //geolocation.getLocation(this.showPosition, this.showErr);//或者用getLocation精确度比拟高 }, showPosition(position) { console.log(position); this.latitude = position.lat; this.longitude = position.lng; this.city = position.city; this.setMap(); }, showErr() { console.log("定位失败"); this.getMyLocation();//定位失败再申请定位，测试应用 },//第二局部 //地位信息在地图上展现 setMap() { //步骤：定义map变量调用 qq.maps.Map() 构造函数获取地图显示容器 //设置地图中心点 var myLatlng = new qq.maps.LatLng(this.latitude,this.longitude); //定义工厂模式函数 var myOptions = { zoom: 13, //设置地图缩放级别 center: myLatlng, //设置中心点款式 mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图款式详情参见MapType } // //获取dom元素增加地图信息 var map = new qq.maps.Map(document.getElementById("container"), myOptions);//第三局部 //给定位的地位增加图片标注 var marker = new qq.maps.Marker({ position: myLatlng, map: map }); //给定位的地位增加文本标注 var marker = new qq.maps.Label({ position: myLatlng, map: map, content:'这是我以后的地位，偏差有点大，哈哈' }); } }, mounted() { this.getMyLocation(); } }</script> ...

关于腾讯地图:vue接入腾讯地图一点击事件

1、【调用展现】在https://lbs.qq.com/guides/startup.html申请一个key //先在vue的index.html外面引入腾讯地图包<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>//.vue<template> <div> <div id="container" style="width:600px;height:500px;"></div> </div></template><script> export default{ mounted() { this.init(); }, methods:{ init() { //步骤：定义map变量调用 qq.maps.Map() 构造函数获取地图显示容器 //设置地图中心点 var myLatlng = new qq.maps.LatLng(39.916527,116.397128); //定义工厂模式函数 var myOptions = { zoom: 8, //设置地图缩放级别 center: myLatlng, //设置中心点款式 mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图款式详情参见MapType } //获取dom元素增加地图信息 var map = new qq.maps.Map(document.getElementById("container"), myOptions); } } }</script>效果图 2、【地图中增加点击事件】增加点击事件 qq.maps.event.addListener(map, 'click', function(event) { alert("你点击了地图"); });点击事件中获取经度this.longitude = event.latLng.getLat();点击事件中获取纬度this.latitude = event.latLng.getLng();残缺案例//先在vue的index.html外面引入腾讯地图包<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>//.vue<template> <div> <div id="container" style="width:600px;height:500px;"></div> </div></template><script>export default{ name:'news', data() { return { longitude:39.916527,//经度 latitude:116.397128//纬度 } }, methods:{ init() { //步骤：定义map变量调用 qq.maps.Map() 构造函数获取地图显示容器 //设置地图中心点 var myLatlng = new qq.maps.LatLng(this.longitude,this.latitude); //定义工厂模式函数 var myOptions = { zoom: 8, //设置地图缩放级别 center: myLatlng, //设置中心点款式 mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图款式详情参见MapType } //获取dom元素增加地图信息 var map = new qq.maps.Map(document.getElementById("container"), myOptions); //给地图增加点击事件 //并获取鼠标点击的经纬度 qq.maps.event.addListener(map, 'click', function(event) { this.longitude = event.latLng.getLat(); this.latitude = event.latLng.getLng(); alert("经度:"+this.longitude+","+"纬度:"+this.latitude); }); } }, mounted() { this.init(); } }</script>效果图 ...

关于腾讯地图:微信小程序结合腾讯地图获取用户所在城市信息

背景实现小程序进去后会获取用户以后所在城市，而后显示该城市的数据，并且显示在导航栏和 Tab上。微信小程序中，咱们能够通过调用wx.getLocation()获取到设施以后的地理位置信息，这个信息是以后地位的经纬度。如果咱们想获取以后地位是处于哪个国家，哪个城市等信息，该如何实现呢？微信小程序中并没有提供这样的API，然而没关系，有wx.getLocation()失去的经纬度作为根底就够了，其余的，咱们能够应用其余第三方地图服务能够来实现，比方腾讯地图API。所以整个步骤就是：在小程序中获取以后的地理位置，波及小程序API为wx.getLocation把第1步中取得的经纬度信息通过腾讯地图的接口逆地址解析，波及腾讯地图接口为reverseGeocoder(options:Object) 在小程序中获取以后的地理位置在小程序中，调用wx.getLocation，应用前须要用户受权scope.userLocation，代码如下 checkAuth(callback) { wx.getSetting({ success(res) { if (!res.authSetting\['scope.userLocation'\]) { wx.authorize({ scope: 'scope.userLocation', success() { wx.getLocation({ type: 'wgs84', success(res) { callback(res.latitude, res.longitude) } }) } }) } } })}其中type的取值能够为： wgs84意思返回 gps 坐标gcj02返回可用于wx.openLocation的坐标运行后会提醒如下信息，还须要在 app.json 中配置permission字段查问文档后得悉，得悉须要如下配置 "permission": { "scope.userLocation": { "desc": "你的地位信息将用于小程序地位接口的成果展现" }}desc 用于在弹出的受权提示框中展现，如下容许后即可获取接口返回的信息，此过程会在右上角胶囊按钮上显示箭头图标 { accuracy: 65 errMsg: "getLocation:ok" horizontalAccuracy: 65 latitude: 30.25961 // 纬度，范畴为 -90~90，正数示意南纬 longitude: 120.13026 // 经度，范畴为 -180~180，正数示意西经 speed: \-1 verticalAccuracy: 65}latitude和longitude即是咱们须要的两个字段 ...

关于腾讯地图:vue使用腾讯位置服务选点组件问题总结

前言应用地图选点组件引发的一系列问题： 1、抉择地址的回调门路不兼容哈希路由 2、回调后腾讯地图返回了残缺的地址，而用户须要省市区具体名称 3、获取省市区具体名称后，如何和后端的数据对上对应的 ID 相干文档地图选点组件效果图：开始应用采纳的是地图 API 的第二种形式，跳转新的页面，通过回调门路把地址信息带回来原先页面代码如下： let url = escape( `${window.location.origin}${window.location.pathname}/#/member/address_form?action=${this.$route.query.action}`)this.$router.go(-1)window.location.href = `https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=${url}&key=这里改成你的腾讯地图密钥&referer=这里是腾讯地图利用名称`url 的解决: 为什么须要这么麻烦的拼接呢?因为如果每次我都间接拿 window.location.href那么如果用户屡次抉择地址，应用 escape 转码的时候，会把门路的中文都转掉，可是咱们并不需要每次都把腾讯地图带给咱们的参数都从新放到回调地址中，所以就须要本人拼接门路为什么须要 escape在 vue 中应用的是原来的哈希路由模式。即门路上会带上 #。这时候回调地址就不能辨认了，就须要用到 escape 做了 url 解决，发现就能够跳转过来了。那第一步就胜利了。解决了第一个问题：抉择地址的回调门路不兼容哈希路由问题 2. 须要省市区的名称这是在地图上轻易定的一个点。门路返回大略就是这些参数蕴含了 name=印象家园酒店公寓%28广园中路店%29&latng=23.15809,113.27209&addr=广东省广州市白云区广园中路 216 号&city=广州市&module=locationPicker大略就是这样的： { name: "具体的地址名称", latng: "抉择的地址的经纬度", addr: "省市区+中央名", city: "城市名", module: "标识"}那么我须要解决的就是经纬度，还有省市区名称 var urlData = this.$route.query // 获取门路上的参数var latng = urlData.latng.split(",") // 获取经纬度var reg = /.+?(省|市|自治区|自治州|县|区)/g // 省市区的正则console.log(latng) // [23.15809,113.27209] 这个数组就是对应的经度纬度了console.log(urlData.addr.match(reg)) // ['广东省','广州市','白云区']和后端的数据对接进过下面 2 步。经纬度，具体地址，省市区都曾经拿到了。那就差和后端的数据匹配上了（这个操作见仁见智，不肯定每个人都有） ...

关于腾讯地图:腾讯地图SDK实现点击建筑显示围栏及建筑信息效果

前言AOI（area of interest），也叫趣味面，与POI相似。POI用于标记一个点，而AOI用于标记一个区域。在腾讯地图APP中点击建筑物，会应用轮廓线将该建筑物突围，同时显示建筑物的相干信息，如：名称、地址、间隔、电话等等。如下图所示：应用场景点击地图中POI名称，显示该修建的AOILayer，并且通过腾讯地图SDK的检索性能获取该建筑物的相干信息。筹备1、腾讯地图3D SDK 2、AOILayer 3、地点检索外围代码1、监听点击POI的回调，获取POI信息： - (void)mapView:(QMapView *)mapView didTapPoi:(QPoiInfo *)poi { // 判断点击的是否为同一个POI，如果雷同，则移除以后AOILayer if (_poiName != nil && [_poiName isEqualToString:poi.name]) { _poiName = nil; [self removeAoiLayer]; return; } _poiName = poi.name; QMSPoiSearchOption *option = [[QMSPoiSearchOption alloc] init]; option.keyword = poi.name; // 检索固定在北京，如果北京没有检索到则主动扩大区域 [option setBoundaryByRegionWithCityName:@"北京" autoExtend:YES center:poi.coordinate]; // 发动检索 [self.mapSearcher searchWithPoiSearchOption:option]; }2、监听检索回调，获取该POI的id值。检索可能返回多个POI数据，这里默认取出第一条与以后点击POI最相近的： - (void)searchWithPoiSearchOption:(QMSPoiSearchOption *)poiSearchOption didReceiveResult:(QMSPoiSearchResult *)poiSearchResult { // 解析出POI的id if (poiSearchResult.dataArray.count > 0) { QMSPoiData *data = poiSearchResult.dataArray.firstObject; if (data.id_ != nil && data.id_.length > 0) { _poiData = data; _poiId = data.id_; // 创立AOILayer [self createAoiLayer]; } }}3、创立AOILayer： ...

关于腾讯地图:腾讯地图SDK实现点击建筑显示围栏及建筑信息效果

关于腾讯地图:腾讯地图点聚合开发实现地图找房功能

以下内容转载自前端develop的文章《腾讯地图实现地图找房性能》作者：前端develop 链接：https://juejin.im/post/684490... 起源：掘金著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。链家实现的成果剖析地图找房性能应用点聚合来实现的。官网示例如下：https://lbs.qq.com/javascript... 链家的地图找房次要分为三层。第一层为市区层，比方南山、罗湖等；第二层为片区，比方南头、科技园等；第三层则为小区。因为第一层，第二层的数据没有那么多，这两个接口都是把所有的数据一次返回给前端。然而第三层的数据量就十分的微小了，链家采取的是返回局部数据，将前端页面上显示的最大经纬度以及最小经纬度传给后盾，后盾再将筛选后的数据返回给前端。（接口地址大家能够应用 Chrome 的开发工具进行抓包，这里须要留神的是链家的接口采纳 jsonp 的模式，所以须要抓取 JS）实现首先须要增加腾讯地图的API，这里举荐应用异步加载的形式。因为我的项目应用 Vue 进行开发的单页利用，有可能用户并没有进入地图找房的页面，所以这里倡议在关上地图找房的页面时增加腾讯地图的API。异步加载须要防止一个反复加载的问题，即不论用户是第几次关上地图找房，地图的 API 都是同一个。这里为了升高代码复杂度，没有应用单例模式，具体的代码如下: const TXMap = { map: undefined, // 地图实例 // 异步加载获取api getApi (funName) { let script = document.createElement('script') script.type = 'text/javascript' script.src = `http://map.qq.com/api/js?v=2.exp&callback=${funName}` document.body.appendChild(script) }}能够看到异步加载就是动静退出 script 标签，src 为腾讯地图 api 的地址，src 蕴含一个 callback 参数，示意 js 加载结束后会调用 funName 这个函数。增加了地图 api 之后，window 对象会有一个 qq.maps 对象，咱们能够用来判断是否曾经增加了 api，来防止反复增加 api。 ...

关于腾讯地图:腾讯位置服务教你快速实现距离测量小工具

以下内容转载自面糊的文章《腾讯地图SDK间隔测量小工具》作者：面糊链接：https://www.jianshu.com/p/6e5... 起源：简书著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。前言为了相熟腾讯地图SDK中的QGeometry几何类，以及点和线之间的配合，编写了这个能够在地图下面打点并获取直线间隔的小Demo。应用场景对于一些须要疾速晓得某段并不是很长的门路，并且须要本人来布局路线的场景，应用腾讯地图的路线布局性能可能并不是本人想要的后果，并且须要时刻联网。该性能宗旨本人在地图下面布局路线，获取这条路线的间隔，并且能够将其保留为本人的路线。然而因为只是通过经纬度来计算的直线间隔，在精度上会存在肯定的误差。筹备腾讯地图3D SDK在地图上增加自定义手势Poyline的绘制间隔计算流程1、在MapView上增加自定义长按手势，并将手势在屏幕上的点转为地图坐标，增加Marker： - (void)setupLongPressGesture { self.addMarkerGesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(addMarker:)]; [self.mapView addGestureRecognizer:self.addMarkerGesture];}- (void)addMarker:(UILongPressGestureRecognizer *)gesture { if (gesture.state == UIGestureRecognizerStateBegan) { // 取点 CLLocationCoordinate2D location = [self.mapView convertPoint:[gesture locationInView:self.mapView] toCoordinateFromView:self.mapView]; QPointAnnotation *annotation = [[QPointAnnotation alloc] init]; annotation.coordinate = location; // 增加到路线中 [self.annotationArray addObject:annotation]; [self.mapView addAnnotation:annotation]; [self handlePoyline]; }}腾讯地图的QMapView类中，提供了能够将屏幕坐标间接转为地图坐标的便当办法：- (CLLocationCoordinate2D)convertPoint: toCoordinateFromView:2、应用增加的Marker的坐标点，绘制Polyline： - (void)handlePoyline { [self.mapView removeOverlays:self.mapView.overlays]; // 判断是否有两个点以上 if (self.annotationArray.count > 1) { NSInteger count = self.annotationArray.count; CLLocationCoordinate2D coords[count]; for (int i = 0; i < count; i++) { QPointAnnotation *annotation = self.annotationArray[i]; coords[i] = annotation.coordinate; } QPolyline *polyline = [[QPolyline alloc] initWithCoordinates:coords count:count]; [self.mapView addOverlay:polyline]; } // 计算间隔 [self countDistance];}这里须要留神的是，每次从新增加Overlay的时候，须要将之前的Overlay删除掉。目前腾讯地图还不反对在同一条Polyline中持续批改。3、计算间隔：QGeometry是SDK提供的无关几何计算的类，在该类中提供了泛滥工具办法，如"坐标转换、判断相交、外接矩形"等不便的性能 ...

时间选择器组件之关于table走过的弯路

为了进步开发者的研发效率，晋升产品品质，咱们提供一套基于饿了么UI实现的UI组件库，TMAP-UI---旨在解决的组件地图场景下利用的问题。最近在新增TMAP-UI组件库的开发过程中，工夫选择器是开发者反馈需要较多的一个组件，明天把在开发过程中遇到的一些问题剖析给大家。element-ui有原生的工夫选择器，然而，在咱们的交互设计师是依据地图理论利用场景中的个性形象组件，element-ui的款式以及交互操作都无奈满足设计需要，须要基于源码进行二次开发，最小老本实现这个通用组件。明天次要聊下开发中遇到的一些对于table的实现问题，对table一探到底… 对于table特点首先，咱们先来根本理解一下table。 <table> <caption>A summary of the UK's most famous punk bands</caption> <thead> <tr> <th scope="col" class="fixed-width-test2">Band</th> </tr> </thead> <tbody> <tr> <th scope="row">Buzzcocks</th> <td>1976</td> <td>9</td> <td>Ever fallen in love (with someone you shouldn't've)</td> </tr> </tbody></table>一个根本的table布局次要由table、tbody、th、td等标签组成。W3C规范中，table的每个标签都自带了display款式。例如td标签默认就会有display:table-cell的款式，在这个默认款式下，新增margin的设置是不会失效的。更具体标签对应款式能够查看W3C规范。对于工夫选择器工夫选择器设计图依据上图为设计师给出的工夫选择器的设计图，抉择工夫范畴是一个重要的新增性能。实现它的步骤拆分成以下几步： 1.实现根本表格布局2.增加日期范畴抉择的款式实现根本表格布局首先咱们须要依照设计图调整日期间的间距和每个日期的单元格大小。所以，须要对于每个子格设置宽、高和margin进行布局。从上图左侧能够看出，款式在style胜利设置的状况下，右侧盒模型的宽和margin都没有失效。我首先猜想是不是哪里的款式压盖了，又或者是款式自身因为某些起因导致没有失效。于是应用罕用的款式压盖办法，在没失效的款式后增加!important来进步设置款式的优先级，但还是没有失效。起初查了W3C的对于table的设置阐明，发现了上文提到的td自带的display:table-cell款式。于是尝试在款式中新增display:block代替原有table自带款式。果然当我设置之后，子td的宽高和margin都失效了。查阅材料之后发现，一方面td标签不容许设置margin，另一方面，在table整体的宽度设定后，款式不会依照td标签中设置的宽度执行，会依照整体的table宽度均分给每一个子td。如果心愿一些非凡的成果，对宽度设置百分比是能够失效的。这其实可能了解，如果在table-cell的模式下容许某个子模块设置宽度和margin，会导致子模块的宽度和高度不可预期，对同一行的其余子块的宽高造成影响。总结下，为了保障table的款式整体联动性，table宽高和子td的宽高设置不能同时应用相对数值来设置，只能设置其中一个绝对值，另外一个用相对值来计算划分。如果咱们通过display:block实现格局，整体的表格构造就会被突破，产生更多不合乎表格逻辑预期的款式问题。于是咱们通过每个子单元格均分的个性，设置总的行宽和行高来管制单元格本身的大小和之间的间隔，从而达到实现整体表格布局的成果。 ## 增加日期范畴和抉择款式盒子宽度问题那当咱们hover态的盒子和背景色彩的盒子大小不一样的时候，咱们就须要在td的外部内置一个盒子。这样通过设置色彩咱们就能够实现背景。依照上述，只有咱们设置好整体的table宽度和背景色彩，就能够失去日期选中范畴的设计背景成果，对应的背景色彩失去如下后果。设定整体宽度之后，咱们发现局部子td之间存在一条深色的边界线。这是因为他们之间呈现了相互压盖，整体的七个td的总宽度设计稿给出是242px，依照预期是应该七个子模块均分宽度。但我查看具体每个子td的宽度发现，有的子td宽度是34、有的是35。这也就是说，在宽度不可能被子模块整除均分的状况下，table主动为咱们做了取整，并且为了放弃总宽度的不便，有些被向下取整，有些被向上取整。目前想到的解决办法是，通过计算固定宽度的总宽度使得每一个td可能被整除。选中态背景问题接下来，咱们须要解决在选中态下起起点日期的款式问题。依照原有的选中款式无论是否增加背景都不能满足需要。见下图，会呈现10号日期右侧空白或26号日期多余背景的状况。对于起始日期，要实现上述要求，咱们须要将起始框以及它的右侧作为块内容并且仍能保障程度居中。解决办法是，对于10号日期的抉择终点，将左侧设置margin，右侧设置相应宽度的padding。做到这里根本能够认为实现了一个日期范畴抉择性能。但实战发现，还没完...... 当用户只抉择了终点咱们会发现选中态导致右侧的边界还会有蓝色背景色。于是，咱们还要利用scss的语法个性为款式设置失效条件来辨别两种不同的显示策略。 border-radius问题设计稿要求，每一行的抉择框的起始和开端须要有圆角。这样一个常见的需要，table果然没让我悲观，对tr标签设置有效。起因是因为在border-collapse设置为separate下，对于所有table标签设置圆角都无奈失效。查阅材料，找到了两种思路的解决办法。第一种就是对tr的子td， first-child/last-child设置圆角。讲到这里就不得不提table的一个属性:border-collapse。这个属性用来决定表格的边框是离开的还是合并的。在分隔模式下，相邻的单元格都领有独立的边框。在合并模式下，相邻单元格共享边框。这里有三个罕用值：inherit, separate,collapse。separate示意每个单元格领有独立的边框，inherit示意相邻的单元格共用同一条边框。当在separate模式下，咱们还能够通过设置border-spacing设置边框的宽度。 ...

腾讯地图JavaScript-API-GL实现文本标记的碰撞避让

以下内容转载自Crape的文章《web页面上的旋转矩形碰撞》作者：Crape 链接：https://juejin.im/post/5eede9... 起源：掘金著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。前言本文次要是总结一下web页面中的旋转矩形的碰撞检测，碰撞算法自身并不难，只是须要留神web坐标系在计算中的影响。碰撞检测应该是在游戏等场景中很常见且根底的性能，本文记录了在JavaScript API GL遇到了这类碰撞问题的调研和实现的过程。需要场景用户在地图上实现MultiLabel文本标注覆盖物时，会因为两个label坐标过近，或者地图的旋转、缩放产生的变动而互相重叠。目前label的背景色均为通明且临时还不反对配置，文字重叠之后辨认度降落很多，就打算先实现label之间的避让性能。检测到两个label碰撞时，依据优先级抉择暗藏其中的一个，保障文字的可读性。确定算法在JSAPI GL中，label并不是在三维空间中的，而是绘制在屏幕上的，只是会依据用户视角的挪动实时计算出label在屏幕坐标中所处的地位，而后在每一帧中进行绘制。label实际上就是一行文字，咱们能够把它用一个矩形包围起来，当做整体计算，因为每个字之间的绝对地位并不会变，这样一来label的碰撞检测实际上能够转化为二维空间内的矩形碰撞。个别的横平竖直的矩形检测碰撞很简略，只有想分明有哪些状况即可，不在这里赘述。然而用户能够对label进行旋转和偏移操作，一般的检测办法就不实用了，如果强行把label用一个大的程度矩形包裹起来再计算，精度损失会很多，所以调研了一下旋转矩形的碰撞检测办法。比拟常见的一种形式是通过拆散轴定律(SAT：Separating Axis Theorem)来计算，拆散轴定义：两个凸多边形物体，如果能找到一个轴，使得两个物体在该轴上的投影互不重叠，那么这两个物体就没有产生碰撞，这条轴能够称为拆散轴。个别不会遍历所有角度的轴，而是检测垂直于多边形每条边的轴，因为在这些轴上咱们能够取到极值。对于矩形来说能够进一步简化，因为一个矩形的4条轴内有2个是反复的，所以只须要检测矩形相互垂直的两条边对应的轴就能够了。进行判断的具体形式有两种：一是把每个矩形的4个顶点投影到一个轴上，算出该矩形最长的连线间隔，判断两个矩形的投影是否重叠；二是将两个矩形的半径间隔投影到轴上，而后把两个矩形中心点的连线投影到通一个轴上，判断两个矩形的半径投影之和与中心点连线投影的大小。本文采纳第二种形式计算，首先搞清楚投影的概念，引入向量来进行计算：咱们能够用单位向量来示意垂直于边线的轴，这样一个向量在轴线上的投影长度能够用该向量与投影轴上的单位向量的点积来示意。如上图，A点坐标为(xa, ya)，OB为线段OA在x轴上的投影，x轴的单位向量为(1, 0)，OA · x轴单位向量 = (xa, ya) · (1, 0) = xa * 1 + ya * 0 = xa。 // 如果用数组[x ,y]示意一个向量,则两个向量的点积后果能够示意为function dot(vectorA, vectorB) { return Math.abs(vectorA[0] * vectorB[0] + vectorA[1] * vectorB[1]);}而后就是如何示意矩形两个轴的单位向量，假如矩形以本身的中心点为原点，逆时针旋转，其两条相邻边的轴的单位向量如下图所示：单位圆的半径为1，所以单位向量OA为 (cos, sin)，另一条边的单位向量与OA垂直，为(-sin, cos)，这两个单位向量的点积为0。但这里有一个十分重要的留神点：web页面中的坐标系与咱们平时应用的坐标系不同，x轴正方向不变，y轴的正方向向下。我在最开始实现算法的过程中疏忽了这个问题，导致碰撞后果不对，调试了半天才发现起因。在理论计算中，咱们所应用的坐标都是web屏幕坐标系下的，轴的正方向与罕用的不同，所以两个单位向量应该别离示意为 (cos, -sin), (sin, cos)，如下图所示：而后就是计算矩形的半径投影，首先明确下半径投影的概念，能够了解为矩形中心点到一个顶点的向量，在轴上的投影长度。其实就是，矩形在X轴上最远处的交点，数学上意义就是2条检测轴的投影之和。两个矩形检测的过程中，以其中一个矩形的检测轴为坐标系，投影另外一个矩形的检测轴。如上图所示，蓝色线段为右边矩形的半径投影，黄色线段为左边矩形检测轴。咱们须要把左边2条检测轴投影到蓝色线段所在X轴的单位向量（即右边矩形的检测轴单位向量），失去投影比例，而后乘以检测轴长度（即矩形长、宽的一半），可计算出左边矩形的半径投影。红色线段则是两个矩形中心点的连线，同样须要计算它在蓝色线段所在X轴的投影长度，如果中心点连线的投影长度大于两个矩形的半径投影之和，那么在这条轴上两个矩形没有碰撞，否则产生碰撞。 ...

基于-WebGL实现自定义栅格图层踩坑实录

以下内容转载自totoro的文章《WebGL-Y轴翻转踩坑实录》作者：totoro 链接：https://blog.totoroxiao.com/w... 来源：https://blog.totoroxiao.com/ 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。前言自定义栅格图层是指用户可以通过特定软件，将自定义的图像按照上文所述的方式切割为瓦片，并生成图片，然后按照瓦片坐标拼接形成地图的图层。常用于手绘地图、卫星图、地形图等。案例背景基于 WebGL 的地图渲染API，实现自定义栅格图层（将地图切分为等大的正方形，并以图片进行拼接渲染）时，为了节省纹理上传的开销，将栅格瓦片集中绘制到一张纹理上，然后绘制时根据瓦片各自的纹理坐标取各自的纹理，大概示意图如下：瓦片根据加载的先后顺序依次排列绘制到大纹理上，占位宽度一致，竖向排列。比如若瓦片大小为256px，那么瓦片1的位置为{x:0, y:0}, 瓦片2的位置为{x:0, y:256}。然后出现了一系列问题：瓦片错乱：瓦片1的位置显示了瓦片4的内容；瓦片内容倒置。问题分析根据调试定位，发现问题的根源在于Y轴翻转。问题1: Y轴翻转是什么？为什么要翻转？先看看没有任何处理的情况下如何绘制纹理，我们绘制瓦片的基本顶点模型是一个中心在原点的正方形，对于每个顶点坐标，需要映射到一个纹理坐标（下图左），传给片元着色器，再使用 texture2D() 取纹理像素，这种情况下左上角顶点(-1,1)对应的纹理坐标为(0,0)。纹理坐标系与顶点坐标系的Y轴方向不同，进行坐标映射的时候会不方便，所以如果将纹理坐标系的Y轴翻转则能使坐标映射更容易（上图右）。 WebGL 也提供了相应接口实现该功能， WebGLRenderingContext.pixelStorei() 是 WebGL 中用于描述像素存储模式的函数，其中 UNPACK_FLIP_Y_WEBGL 可以用于设置Y轴是否翻转： // 1表示翻转，0表示不翻转gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);问题2: 为什么Y轴翻转会导致瓦片错乱呢？如上文所述，首先需要通过 texImage2D 创建一个大纹理，然后使用 texSubImage2D 将瓦片绘制到大纹理上： // x, y 表示偏移量gl.texSubImage2D(gl.TEXTURE_2D, 0, x, y, gl.RGBA, gl.UNSIGNED_BYTE, image);这个接口用于改变纹理中指定子区域的数据，可以类比于 CanvasRenderingContext2D.drawImage() ，我们平常使用 drawImage 时都是以左上角为原点进行偏移，所以想象中的大纹理是如下图所示的那样，瓦片1的左上角对应纹理坐标(0, 1)，左下角为(0, 0.75)，以此类推。但实际上Y轴翻转并不只作用在片元着色器的纹理中，使用 texImage2D 创建大纹理时其像素存储模式就已经确定了，当执行 texSubImage2D 时也会对 image 的像素存储位置进行反转，其执行过程是这样：所以实际上大纹理应该长如下这样：所以当使用纹理坐标左上角(0, 1)+左下角(0, 0.75)时，我们取到的是瓦片4的纹理，最终导致了瓦片错乱。 ...

一种室内定位免采集室内店铺WiFi指纹填充算法

以下内容为我们内部人员供稿，著作权归作者所有。商业转载请联系我们获得授权，非商业转载请注明出处。对于目前最主流的室内Wi-Fi指纹定位技术而言，采集Wi-Fi指纹的覆盖度和新鲜度是决定定位精度最重要的因素。受到成本和导航需求等因素的限制，腾讯地图定位平台目前提供的室内定位服务只对商场的走廊部分采集了指纹信息。对于面积更大的商场店铺，目前很难人工采集Wi-Fi指纹。本文介绍了我们如何利用过去积累的定位日志数据，实现了室内店铺Wi-Fi指纹的自动填充，并用于室内定位服务，从而提升了我们室内定位服务的覆盖度和服务质量。一、问题背景在室内环境中，由于建筑对信号的遮挡，GPS信号非常微弱甚至探测不到，无法用于定位服务。而随着Wi-Fi技术的普及和广泛部署，基于Wi-Fi指纹的定位技术目前已经成为室内最普适、最基础的定位解决方案。然而，对于Wi-Fi指纹定位技术而言，采集指纹的覆盖度和新鲜度是决定定位精度的最重要的因素。图1. 北京欧美汇购物中心某层人工采集Wi-Fi指纹覆盖示意图目前，腾讯地图定位平台对国内的主要商场都提供了基于Wi-Fi指纹的室内定位服务。然而，受到指纹采集成本和导航需求等因素的限制，目前指纹采集主要集中在商场走廊区域。图1展示了在北京欧美汇购物中心某一层中我们采集的Wi-Fi指纹的覆盖情况。从图中我们可以看到，对于商场内主要的走廊区域，我们都进行了指纹的采集。然而，对于范围更大的店铺部分，目前采集Wi-Fi指纹的流程很难覆盖到。这种指纹覆盖不全的情况会导致我们无法在整个商场内保证定位质量的一致性。当有用户在店铺内发起定位请求时，由于店铺内缺失Wi-Fi指纹信息，理想的情况是恰好在店铺门口采集的Wi-Fi指纹与用户请求定位时扫描到的Wi-Fi信息比较类似，将用户定位在店铺门口。然而，更糟糕的一种情况则是如图2展示的那样，我们将用户定位在了一个离店铺较远的位置，严重降低了用户的定位体验。图2. 用户在店铺中发出定位请求，实际定位结果偏移了44米对于这种情况，最为直接的解决方案是在店铺内也采集指纹信息，做到整个商场内指纹采集全覆盖。然而，由于店铺的面积远远大于商场内走廊区域的面积，采集店铺指纹会导致成本成倍增加。同时，由于店铺装修、搬迁以及店内Wi-Fi设备更换更为频繁，要想保证店铺指纹的准确性，店铺指纹的更新也需要更加的频繁。这些因素导致了在目前的技术条件下，无法人工地对店铺指纹进行采集。因此，我们要寻求别的方式来对商场内的店铺指纹进行填充，并将其用于我们的定位服务。二、店铺Wi-Fi指纹的自动化填充目前，腾讯地图定位平台的室内定位服务覆盖了全国的三千多个主要商场，每天有上亿次定位请求发生在这些商场中，并且有上千万次定位请求是在手机连接了Wi-Fi热点的情况下发出。如果一个用户发出定位请求时连接的Wi-Fi热点是店铺内的热点，那么该用户发出定位请求时所在的真实位置很有可能就在该店铺中。此时，该用户请求定位时上传的Wi-Fi扫描信息就有机会被用于建立店铺指纹。然而，想要利用用户连接热点时请求定位的日志记录来建立店铺指纹，有一些挑战需要解决：用户连接的Wi-Fi热点是否在店铺中？在哪个店铺中？如何确保连接了热点的定位请求就一定是在对应的店铺中发出的？针对第一个问题，我们根据每个Wi-Fi热点的名称、店铺的名称、从历史定位日志中挖掘出的每个Wi-Fi的位置以及其它的一些信息，尝试把每个Wi-Fi热点都和一个店铺关联起来，建立了Wi-Fi和店铺之间的映射关系库，为我们后续用定位日志数据来填充店铺指纹提供了良好的数据基础。针对第二个问题，我们根据定位请求中扫描到的店铺内Wi-Fi热点的信号强度信息对定位日志进行清洗，保留下来那些信号强度较强的请求数据，从而尽可能保证每个用于店铺指纹填充的请求日志都是在对应的店铺内产生的。最后我们采用最近一个月的日志数据对店铺指纹进行填充，并且定期更新。通过这种方式，我们既保证了店铺指纹的自动化填充，同时也确保了店铺指纹的新鲜度——即使店铺发生变化或者迁移，我们的指纹数据也能够及时适应。三、约束式定位在填充了店铺指纹之后，我们还需要将店铺指纹用于我们的定位服务，填补人工采集的Wi-Fi指纹没有覆盖到的区域。然而，店铺Wi-Fi指纹和人工采集的走廊区域的Wi-Fi指纹存在很大的差异，导致二者无法直接融合。首先，不同来源的指纹的新鲜度不同。店铺Wi-Fi指纹来自定位日志，能够每天自动更新，时刻保持最新鲜的状态。但是，人工采集指纹的周期一般都在一年左右。因此，走廊区域的指纹信息会随着时间逐渐老化，与实际请求时扫描到的Wi-Fi列表的匹配度会逐渐下降。这两种指纹信息同时用于位置计算时，会由于新鲜度差异导致指纹匹配度存在bias。其次，不同获取方式得到的指纹可靠性不同。人工采集的Wi-Fi指纹具有十分明确的真实位置的标注，可信度较高；而自动填充的店铺Wi-Fi指纹，即使加入了数据清洗策略，也只能保证大部分指纹数据数据来源于店铺中，整体数据中存在一定比例的噪声数据。图3. 基于网格Wi-Fi指纹的定位过程：选择最相似的几个网格计算最终位置除此之外，人工采集的Wi-Fi指纹所代表的区域大小和店铺指纹所代表的区域大小也有很大的不同。人工采集Wi-Fi指纹时会将定位区域以网格的形式进行划分，每个网格具有相同的大小，然后采集每个网格的Wi-Fi指纹。在实际定位过程中，如图3所示，我们会选择一个或几个Wi-Fi指纹和采集到的Wi-Fi列表最相似的网格来确定目标位置。然而，店铺Wi-Fi指纹表述的是整个店铺的特征。一个店铺比一个网格一般要大很多，并且不同店铺的大小和形状也不相同。受上述因素的影响，我们无法将人工采集的网格指纹和自动填充的店铺指纹直接对等地融合在一起提供位置服务。同时，考虑到店铺指纹的可靠性较低以及覆盖范围过大，店铺指纹如果最终参与到位置计算中有可能会造成较大偏移。因此，我们最终采取了基于排序的约束式定位。图4展示了我们目前版本约束式定位的整体流程。图4. 基于店铺填充Wi-Fi指纹的约束式定位示意图首先，我们建立了一个排序模型来判断目标发出请求的位置是在店铺内还是在有人工采集指纹覆盖的走廊内。我们根据人工采集的网格指纹和自动填充的店铺指纹中出现的Wi-Fi、每个Wi-Fi对应的信号强度等信息，对每个网格和店铺都提取出了一个41维的特征向量。基于特征向量，我们训练了一个XGBoost树模型作为我们的排序模型，来对店铺和网格进行排序，判断用户发出定位请求的实际区域。图5. 将最终定位结果约束在店铺附近然后，基于不同排序结果，我们采用了不同的定位策略。如果我们判断出目前发出请求的位置更可能是在人工采集过指纹的网格中，那么我们采用已有的定位流程，根据网格内的指纹特征，选择最相似的1个或几个网格来计算目标的位置。如果我们判断出目标发出定位请求的位置更可能是在某个店铺中，那么我们会找到店铺周围的那些网格，如图5所示，用这些网格来最终确定目标的位置，从而将定位结果约束在目标最可能存在店铺门口，以免产生过大的定位偏移。最终，在上述策略下，对于因店铺指纹缺失导致定位结果偏离实际位置过远的情况，我们能够将50%的请求重新约束在正确范围内进行定位，大大减少了大偏移定位结果的数量。而对于原有系统能够正确定位的情况，我们最多也只会对其中2%的定位请求造成错误约束，不会对现有的定位性能和其它相关服务造成负面影响。四、小结随着定位服务质量的提升，越来越多的用户开始使用我们的室内定位服务，同时也对定位精度提出了更高的要求。然而，受系统搭建成本的限制，我们人工采集室内指纹无法真正覆盖室内的所有区域。店铺指纹的缺失已经成为限制室内定位服务质量进一步提升的关键。在本文中，我们利用了团队过去积累下来的定位数据的优势，在不增加成本的情况下，自动化地填充了一部分店铺指纹，并用于定位服务，提高了可定位区域的范围，大大提升了用户定位体验。未来，我们会不断优化用于指纹填充的数据质量，同时结合更多的数据来源，提高数据准确度的同时也为更多的店铺进行指纹填充，从而提供一个更加全面和精准的定位体验，也为更上层的应用服务提供一个可靠的基础位置信息服务。目前室内图产品为我们腾讯位置服务特色付费产品，如感兴趣可点击了解，欢迎大家体验~iOS地图SDK室内图、Android地图SDK室内图

微信深色模式同款地图你一定不能错过的个性化地图样式

微信深色模式一经推出就成了热点话题，不光微信首页和聊天页面进行了深色适配，细心的小伙伴们一定发现就连发送位置和共享位置里的地图也”变黑”了！这背后其实应用了个性化地图的能力。有了它，开发者们不光可以随意调整地图配色，还可以控制地图元素的显示隐藏，可以说是把定制地图的权利交到每个开发者手中。下面就带大家一起来看下个性化地图是否就是你所需要的地图升级秘密武器。文章结尾更有微信深色地图同款模板送给大家。为什么要用个性化地图现如今我们生活中的多种场景都早已离不开地图服务，打车、物流、外卖、甚至于旅游和游戏。但众多APP中集成的地图也在随着应用发展，而不再一成不变。比如滴滴APP中，为了突出用户和司机位置以及规划好的行驶路线，地图显示为浅色背景，周围的无关Poi信息也被弱化。而在美团APP中，酒店、餐厅等地点往往是其用户的目的地，那么在地图上反而会突出显示。除了地图属性要和应用的行业属性相契合外，做LBS游戏的开发者希望地图配色可以更加贴合游戏风格、智慧景区的地图希望和景点园区的主题色彩相匹配。这些都需要我们对地图进行个性化的升级，从而提高不同场景下地图的展现效果和用户体验。以下场景搭配个性化地图使用效果最佳： • 灵活控制地图元素展现效果，适配行业场景 • 轻松调整地图整体配色，契合应用和品牌色调 • 高自由度定制地图样式，打造地图可视化效果为什么选择腾讯位置服务个性化地图• 微信小程序、APP、H5、Unity全平台通用。开发者可实现多平台地图效果一体化。一次编辑，多端使用，节约重复编辑样式的时间成本，为开发者提供了极大的便利。 • 开发成本极小。在个性化地图编辑平台中完成设计后，开发者只需将Key和新建地图样式绑定，即可在应用端一个接口直接调用，对于开发成本来讲，小到可以忽略。 • 个性化样式支持动态更新。样式改变甚至无需发版，直接在编辑平台享受云端控制的快感。编辑平台能力全面提升为了满足众多行业地图开发者的需要，腾讯位置服务对现有的编辑平台再次进行了能力升级。 • 支持全局配置和分级配置两种配置方法。在全局配置中，一键修改全局生效方便快捷。在分级配置中可对地图中每一层级进行单独调整，将地图展现效果的设计权完全交到用户手中。 • 能够支持自定义的地图元素扩充为52种。将用户希望修改的内容尽收其中。地图要素分类释义简单明了，使用者可快速找到自己想要修改的内容。 • 每个元素可配置的属性全部开放无论是展现级别、字体大小、颜色、描边、透明度全部支持自定义调整。 • 编辑平台UI控件全面优化。支持鼠标点选和参数手动输入两种方式修改，丰富提示和使用说明。进一步降低用户的使用成本，帮助用户快速得到自己心仪的地图样式。都有谁使用腾讯位置服务个性化地图腾讯位置服务持续为各行业开发者提供可靠易用的LBS服务，个性化地图样式在其中承接了众多行业头部客户的需求。出行行业客户如滴滴、摩拜，O2O行业的美团，物流电商行业的京东，社交行业的微信等，都使用我们的能力完成了地图展现的效果升级。各位开发者们，如果在你的应用页面里地图是重要的组成部分，那么标准的地图样式可能早已不能满足用户需求。使用个性化编辑平台，突出地图中应用的行业属性，契合自己APP的UI色调，打造自己的专属地图无疑是提效率促转化，综合提高用户体验的必备选择。彩蛋微信深色模式免费开放最后的结尾彩蛋就是微信深色模式同款地图也在腾讯位置服务个性化地图平台面向所有开发者免费开放了。只需选择其中的微信深色模板，即可在微信小程序、APP、H5等多端同时体验。已经做了深色模式但苦恼于地图不能适配的开发者，快快拿走体验吧。立即前往

php-根据实际地址获取对应的经纬度

在php中根据实际地址获取对应的经纬度，这里推荐使用百度地图和腾讯地图提供的现成的接口这里注意一点：百度地图和腾讯地图的坐标与真实经纬度是不同的，国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ-02,对地理位置进行首次加密，腾讯使用的就是国测局制定的GCJ-02。百度坐标在此基础上，进行了BD-09二次加密措施一：百度地图：根据实际地址获取经纬度的百度接口文档地址：地理编码 1：获取密钥点击文档左侧的获取密钥按钮，根据提示获取密钥 2：实现根据实际地址获取到经纬度 <?phpfunction curl($url){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); //参数为1表示传输数据，为0表示直接输出显示。 curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); //参数为0表示不带头文件，为1表示带头文件 curl_setopt($ch, CURLOPT_HEADER,0); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER,false); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST,false); $output = curl_exec($ch); curl_close($ch); return $output;}$data_info=curl("http://api.map.baidu.com/geocoder/v2/?address=实际地址&output=json&ak=你的密钥");$data_info = json_decode($data_info, true); //数据转换print_r($data_info);根据如上的代码就可以获取到实际地址对应的经纬度二：腾讯地图腾讯根据实际地址获取经纬度接口文档：https://lbs.qq.com/webservice... 1：获取密钥：申请密钥地址：https://lbs.qq.com/console/ke... 根据提示获取到所需的密钥 2：获取实际地址的经纬度接口：https://apis.map.qq.com/ws/ge... 代码实现和上面的相同，这里就不写出来了