腾讯API 地图相关使用 _腾讯API

上个星期公司让我做一个需求，需求描述如下：
首先根据用户的当前位置进行定位，然后在地图上展示出当前的定位地址，用户可以自己移动位置，并且用户可以自己进行搜索地理位置进行定位(描述能力不是很好，请见谅！！！)
解决：
刚开始我准备使用百度地图来实现上述的现象，但是由于上述要求需要与我们的小程序项目进行对应上，由于百度使用的是BD-09(百度坐标系)，如果使用百度地图来实现的话，之后会使用到坐标系的转化，感觉有点麻烦，由于小程序使用的就是腾讯地图，所以这里我就是用腾讯地图API来实现上面的需求
一：用户定位用户定位使用到的JS文件：https://3gimg.qq.com/lightmap...
用户定位API：
var geolocation = new qq.maps.Geolocation("开发者KEY", "myApp");geolocation.getLocation(function(position) { console.log(position) lat = position.lat;//纬度 lng = position.lng;//经度});根据如上代码控制台现象如：

文章插图

二：根据定位在地图上展示定位使用到的JS文件：https://map.qq.com/api/js?v=2...
1：地图展示API：
html(地图容器):
<div id="container" style="height: 400px;width: 500px"></div>js：
var center = new qq.maps.LatLng(lat, lng);//lat：纬度,lng：经度//定义map变量调用 qq.maps.Map() 构造函数获取地图显示容器var map = new qq.maps.Map(document.getElementById("container"), { center: center, // 地图的中心地理坐标。zoom:14});根据如上代码现象如：

文章插图

2：在地图上标注出当前定位点：
根据上面的我们可以显示出我们定位的地图，但是我们无法看到我们的定位位置在哪，标注API就可以让我们知道我们定位的位子在哪了
标注API：
//添加标记点var marker = new qq.maps.Marker({ position: center, draggable: true,//标注点是否可移动 map: map});如果我们将draggable参数设置为true(标注点可移动)，在标注点移动结束后会触发dragend事件
//标注点拖拽事件qq.maps.event.addListener(marker, 'dragend', function(event) { console.log(event) lat = event.latLng.getLat() //纬度 lng = event.latLng.getLng() //经度});根据如上现象如：

文章插图

移动标注点控制台现象如：

文章插图

3：在地图上显示提示信息
提示窗API：
//添加到提示窗var info = new qq.maps.InfoWindow({ map: map});info.open();//lat：纬度, lng：经度info.setContent('<div style="text-align:center;white-space:nowrap;margin:2px;">' + '<div>纬度:'+ lat + '</div>' + '<div>经度:'+ lng + '</div>' + '</div>');info.setPosition(center);根据如上代码现象如：

文章插图

4：根据实际地址获取到对应的经纬度
地址解析(Geocoder)API：
//调用地址解析类var geocoder = new qq.maps.Geocoder({ complete: function (result) { console.log(result) lat = result.detail.location.lat;//经度 lng = result.detail.location.lng;//纬度 }})var searchAddress = '北京市海淀区海淀大街38号';//实际地址//通过getLocation();方法获取位置信息值geocoder.getLocation(searchAddress);根据如上代码控制台现象如：

文章插图
【腾讯API 地图相关使用】
根据如上学习我的需求实现代码如下：
1：引入js:
<script src=https://www.isolves.com/it/cxkf/bk/2019-08-12/"https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js">2：html:
<div> <input type="text" id="search_address" placeholder="请输入详细地址"> <button onclick="searchAddress()">搜索</button></div><div id="container" style="height: 400px;width: 500px"></div>3：js:
window.onload = function(){ //初始化地图函数自定义函数名init function init() { //获取用户经纬度 var geolocation = new qq.maps.Geolocation("开发者KEY", "myapp"); geolocation.getLocation(function(position) { console.log(position) lat = position.lat;//纬度 lng = position.lng;//经度 container = 'container'; mapShow(lat, lng, container) }); } //调用初始化函数地图 init();}/** * 实际地址搜索事件 * /function searchAddress() { //调用地址解析类 var geocoder = new qq.maps.Geocoder({ complete: function (result) { //根据用户输入的详细地址获取到对应的经纬度 lat = result.detail.location.lat;//纬度 lng = result.detail.location.lng;//经度 container = 'container'; mapShow(lat, lng, container) } }) var searchAddress = document.getElementById('search_address').value;//获取用户输入的详细地址 //通过getLocation();方法获取位置信息值 geocoder.getLocation(searchAddress);}/** * 提示框 * @param info * @param lat * @param lng * @param center */function message(info, lat, lng, center) { info.open(); //lat：纬度, lng：经度 info.setContent('<div style="text-align:center;white-space:nowrap;margin:2px;">' + '<div>纬度:'+ lat + '</div>' + '<div>经度:'+ lng + '</div>' + '</div>'); info.setPosition(center);}/** * 地图展示 * @param lat * @param lng * @param container */function mapShow(lat, lng, container) { //初始化地图，展示地图 var center = new qq.maps.LatLng(lat, lng); //定义map变量调用 qq.maps.Map() 构造函数获取地图显示容器 var map = new qq.maps.Map(document.getElementById(container), { center: center, // 地图的中心地理坐标。zoom:14 }); //添加标记点 var marker = new qq.maps.Marker({ position: center, draggable: true,//标注点是否可移动 map: map }); //添加到提示窗 var info = new qq.maps.InfoWindow({ map: map }); message(info, lat, lng, center) //标注点拖拽事件 qq.maps.event.addListener(marker, 'dragend', function(event) { console.log(event) lat = event.latLng.getLat() //纬度 lng = event.latLng.getLng() //经度 center = new qq.maps.LatLng(lat, lng); message(info, lat, lng, center) });}