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

根據如上實現：