上個星期公司讓我做一個需求，需求描述如下：
首先根據用戶的當前位置進行定位，然后在地圖上展示出當前的定位地址，用戶可以自己移動位置，并且用戶可以自己進行搜索地理位置進行定位(描述能力不是很好，請見諒！！！)
解決：
剛開始我準備使用百度地圖來實現上述的現象，但是由于上述要求需要與我們的小程序項目進行對應上，由于百度使用的是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)
});
}
根據如上實現：
