腾讯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);

根据如上代码控制台现象如：

 

根据如上学习我的需求实现代码如下：

1：引入js:

<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<script src="https://map.qq.com/api/js?v=2.exp&key=开发者KEY"></script>

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)
 });
}

根据如上实现：