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

根据如上实现：