乐趣区

腾讯API-地图相关实现

jiezi

上个星期公司让我做一个需求，需求描述如下：

首先根据用户的当前位置进行定位，然后在地图上展示出当前的定位地址，用户可以自己移动位置，并且用户可以自己进行搜索地理位置进行定位 (描述能力不是很好，请见谅！！！)

解决：

刚开始我准备使用百度地图来实现上述的现象，但是由于上述要求需要与我们的小程序项目进行对应上，由于百度使用的是 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)
    });
}

根据如上实现：

退出移动版