共计 6724 个字符，预计需要花费 17 分钟才能阅读完成。
前言
地图利用十分宽泛，目前地图服务，都提供地图操作、标注、地点搜寻、出行布局、地址解析、街景等接口，性能十分丰盛。在理论开发过程中，各有优劣。本次基于需要，应用腾讯位置服务作为一个专用厕所地位标注的 H5 页面开发。
本次应用版本：JavaScript API 2.0 版本。
我的项目需要
1、我的项目需要
基于腾讯位置服务，实现微信扫描二维码后，在微信浏览器内，展现某县城的专用厕所分布图，依照用户以后定位与各个厕所之间的间隔远近排序，点击标注点跳转到腾讯地图进行导航。
2、需要合成
基于上述需要，对应用到的腾讯位置服务接口予以合成如下：
腾讯地图加载；主动定位；信息点 (POINTS) 标注 maker；计算标注点之间的间隔；导航跳转链接 API 接口；街道与卫星地图切换控件；缩放控件；开发实战
1、引入性能库和附件库
<script charset="utf-8"
src="https://map.qq.com/api/js?v=2.exp&libraries=drawing,geometry,autocomplete,convertor&key={$appkey}"></script>
<script type="text/javascript"
src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>2、构建腾讯地图容器
<!-- 地图加载 -->
<div id="location" onclick="getLocation();"></div>
<div id="txmap"></div>3、调用前端定位组件
因为我的项目须要屡次调用地图和定位，为此，在 script 脚本中 map 和 geolocation 都设置为全局函数。
var map;// 全局函数
var geolocation = new qq.maps.Geolocation(appkey, "{$referer}");
var options = {timeout: 8000};
function getLocation() {geolocation.getLocation(showPosition, showErr, options);
}getLocation(sucCallback, errCallback, [options: {timeout: number, failTipFlag: boolean}])办法
获取以后所在地理位置，调用一次即从新定位一次，定位数据比拟准确。sucCallback 为定位胜利回调函数，必填；errCallback 为定位失败回调函数，选填，如果不填，请设为 null；options 为定位选项，选填，能够通过 timeout 参数设置定位的超时工夫，默认值为 10s;
failTipFlag: 是否在定位失败时给出提醒疏导用户关上受权或关上定位开关。（行将反对）1）定位胜利回调函数
function showPosition(position) {}获取地位坐标显示地图
map = new qq.maps.Map(document.getElementById("txmap"), {
// 地图的核心地理坐标。center: new qq.maps.LatLng(position.lat, position.lng),
zoom: 15
});定义以后地位 maker 款式图片
var imgUrl = "static/rooted/images/icon.png";
var anchor = new qq.maps.Point(6, 6),
size = new qq.maps.Size(45, 46),
origin = new qq.maps.Point(0, 0),
icon = new qq.maps.MarkerImage(imgUrl, size, origin, anchor);
var marker2 = new qq.maps.Marker({
icon: icon,
map: map,
position: new qq.maps.LatLng(position.lat, position.lng)
});读取信息点 (POINTS) 并在地图上标注
1、规范 JSON 数据格式
为不便展现，此处仅展现数据格式，理论利用做，应用 ajax 获取即可。
[
{
"toilet_id": "9",
"toilet_name": "智慧广场",
"toilet_address": "西溪路 智慧核心南",
"toilet_url": "upload/preview/2020-11/15784affe0de0d45c5f33625851527e9.jpg",
"toilet_lon": "115.965248",
"toilet_lat": "35.597050"
},
{
"toilet_id": "14",
"toilet_name": "唐塔公厕",
"toilet_address": "东门街北段唐塔广场",
"toilet_url": "upload/preview/2020-11/8e5bda8c5b12f87ebad80c247d8f2b26.jpg",
"toilet_lon": "115.946365",
"toilet_lat": "35.602218"
}
]2、地图标注并计算间隔
// 地图标注;
getTxMap(newData, latlngs);
// 两点间的间隔;
getDistance(newData, latlngs);经纬度标注封装函数
function getTxMap(newData, latlngs) {for (var i = 0; i < newData.length; i++) {(function (n) {
var marker = new qq.maps.Marker({position: latlngs[n],
map: map
});
qq.maps.event.addListener(marker, 'click', function () {var popHtml = '<div class="pop"> 到这里: <a href="https://apis.map.qq.com/uri/v1/routeplan?type=walk&from= 起步地位 &fromcoord='+ position.lat +','+ position.lng +'&to='+ newData[n].toilet_name +'&tocoord='+ newData[n].toilet_lat +','+ newData[n].toilet_lon +'&policy=0&referer={$referer}">' + newData[n].toilet_name + '</a></div>';
infoWin.open();
infoWin.setContent(popHtml);
infoWin.setPosition(latlngs[n]);
});
})(i);
}
}计算两点间的间隔函数封装
function getDistance(newData, latlngs) {var newArr = [];
var start = new qq.maps.LatLng(position.lat, position.lng);
for (var i = 0; i < latlngs.length; i++) {var end = latlngs[i];
var distance = Math.round(qq.maps.geometry.spherical.computeDistanceBetween(start, end) * 10) / 10;
// 拼接新的间隔数组数据;
newArr.push({toilet_id: newData[i].toilet_id,
toilet_name: newData[i].toilet_name,
toilet_address: newData[i].toilet_address,
toilet_url: newData[i].toilet_url,
toilet_lon: newData[i].toilet_lon,
toilet_lat: newData[i].toilet_lat,
distance: distance
})
}
// 升序排列;
function compare(key) {return function (value1, value2) {var val1 = value1[key];
var val2 = value2[key];
return val1 - val2;
}
}
newArr.sort(compare('distance'));
console.log(newArr);2、定位失败回调函数
// 定位失败，主动跳转页面;
function showErr() {//alert("定位失败！");
window.location.href = "?m=Index&a=error"
}坐标经纬度拾取
1、腾讯坐标拾取器
我的项目开发过程中，须要本人拾取坐标经纬度，以满足初始数据的测试和演示应用。个别会应用腾讯提供的坐标拾取器。链接地址：https://lbs.qq.com/tool/getpo…
反对地址 准确 / 含糊 查问；反对 POI 点坐标显示；坐标鼠标追随显示；如果非要挑出点故障的话，地图拾取框太小了，想得心应手的拾取坐标，要缩放或拖拽很屡次，心累。
2、WebService API 地址解析（地址转坐标）
在我的项目实现测试后，如果遇到成千上百的地址时，一个一个的拾取，如同不是一个合格的开发者的所为。此时，就须要应用到地址解析和逆解析的 API 接口，即：在数据导入到数据库的过程中，主动批量地将地址转化为经纬度坐标，满足前端的调用。
本例中应用了腾讯位置服务的 WebService API，后端语言应用 PHP，简要的将该过程予以出现。
1、封装 WebService API 接口函数
官网实例，如果在前端间接应用 getJSON 函数，会呈现“同源策略”被阻止，为此须要后端爬取后，“曲线救国”。
//GET 申请示例，留神参数值要进行 URL 编码
https://apis.map.qq.com/ws/geocoder/v1/?address= 北京市海淀区彩和坊路海淀西大街 74 号 &key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77
/* 地址转坐标封装函数，文件名称为 points.php
*$address，须要转化的地址，越具体经纬度精度越高；*/
function getGeoCoding($address)
{$url = "https://apis.map.qq.com/ws/geocoder/v1/?address=" . $address . "&key={$key}";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);
curl_close($ch);
return $output;
}
// 获取前端传入的地址参数;
$address = $_GET["address"];
// 输入 json 数据格式，供前端调用;
die(getGeoCoding($address));2、前端调用
// 自動獲取經緯度;
var getAddress = function transAddress() {var address = $("#address").val();
getPoints(address);
}
// 前端页面输入;
function getPoints(address) {$.getJSON("points.php", {address: address}, function (res) {if (res.status == 0) {$("#lng").val(res.result.location.lng);
$("#lat").val(res.result.location.lat);
} else {$("#message").html(res.message);
}
});
}3、成果演示
在导入地址数据的时候，肯定要是省市区街道门牌号，地址越具体精度越高，否则会解析不进去，谨记！
注意事项
1、script 标签加载 API 服务
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>在开发过程中，默认会这样引入到前端文件。测试环境和生成环境统一，或者更换环境也是始终，不会呈现问题的。然而如果是 http 和 https 不统一的协定环境下，引入文件就会呈现谬误提醒。
倡议的加载形式：src 不应用协定名称，让其主动匹配。如：
<script charset="utf-8" src="//map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>2、附加库的引入
学习一个新我的项目的最快捷方式是学会应用官网文档，因为这些文档是根底中的根底。但官网文档的有时太官网，有些细节无奈分明的展现进去。
官网文档不能解决的问题时，会“面对 CSDN 编程”，每个开发者遇到的问题不同，开发教训不同，在 CSDN 上的记录更多的是为了防止本人下次“入坑”揭示，无奈残缺的将我的项目的细节形容分明，也是初学者看到人家明明解决了，为什么本人不能够的。
这里就牵涉到腾讯地图附加库的引入。
<script charset="utf-8"
src="://map.qq.com/api/js?v=2.exp&libraries=drawing,geometry,autocomplete,convertor&key={$appkey}"></script>本我的项目中就遇见须要计算主动定位的经纬度和各个厕所之间的间隔，须要应用 geometry 几何运算库。在未了解官网文档的前提下，强行 CSDN，走路很多弯路才发现：开发语法明明对了，然而却没有计算出间隔，就是没引入对应的附加库。
3、主动定位组件库
<script type="text/javascript"
src="//3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>应用主动定位性能，必须引入主动定位的 geolocation.min.js 附加库，毋庸多言。
4、经纬度地位
如果是首次开发地图就应用腾讯地图的话，呈现这个谬误的可能性比拟低。如果有百度和高德地图开发的教训话，千万不要想当然。在这个问题上节约了半个小时才发现，腾讯的经纬度和百度、高德的问题是调换的。
腾讯经纬度
new qq.maps.LatLng(39.914850, 116.403765); // 构建对象的是（纬度，经度）百度经纬度
map.centerAndZoom(new BMap.Point(116.4035,39.915),8); // 构建对象的是（经度，纬度）高德经纬度
position: new AMap.LngLat(116.39, 39.9),// 构建点对象的是（经度，纬度）在应用坐标拾取器时，肯定要抉择各个对应的工具，导航等牵涉到坐标的中央肯定要留神。
5、腾讯、百度和高德地图开发比拟
对于不同的厂家地图的应用，个别都有“先入为主”的刻板印象，也有甲方起因的主观要求。
| 比照项 | 腾讯地图 | 百度地图 | 高德地图 |
|---|---|---|---|
| 性能 | 标注、信息框、覆盖物、计算间隔、轨迹、导航等罕用性能 | 同前 | 同前 |
| 坐标 | 火星坐标 | BD-09 坐标 | 火星坐标 |
| 坐标构造 | (39.914850, 116.403765) | （116.4035,39.915） | （116.39, 39.9） |
| 语法结构 | 同高德 | 百度自有语法 | 同腾讯 |
| 开发文档 | 绝对集中 | 百度地图开发平台已降级到 3.0 版本，文档多，类库多 | 绝对集中 |
| 延长 | 数据可视化 API 服务 | 同前 | 同前 |
总结
本次应用版本：JavaScript API 2.0 版本，目前咱们提供的 JavaScript API GL 版本，性能更炫酷齐全，大家能够尝试接入应用。
作者：漏刻有时
链接：https://lockdatav.blog.csdn.n…
起源：CSDN
著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。
