上個(gè)星期公司讓我做一個(gè)需求，需求描述如下：
首先根據(jù)用戶的當(dāng)前位置進(jìn)行定位，然后在地圖上展示出當(dāng)前的定位地址，用戶可以自己移動(dòng)位置，并且用戶可以自己進(jìn)行搜索地理位置進(jìn)行定位(描述能力不是很好，請(qǐng)見(jiàn)諒！！！)
解決：
剛開(kāi)始我準(zhǔn)備使用百度地圖來(lái)實(shí)現(xiàn)上述的現(xiàn)象，但是由于上述要求需要與我們的小程序項(xiàng)目進(jìn)行對(duì)應(yīng)上，由于百度使用的是BD-09(百度坐標(biāo)系)，如果使用百度地圖來(lái)實(shí)現(xiàn)的話，之后會(huì)使用到坐標(biāo)系的轉(zhuǎn)化，感覺(jué)有點(diǎn)麻煩，由于小程序使用的就是騰訊地圖，所以這里我就是用騰訊地圖API來(lái)實(shí)現(xiàn)上面的需求
一：用戶定位
用戶定位使用到的JS文件：https://3gimg.qq.com/lightmap...
用戶定位API：
var geolocation = new qq.maps.Geolocation("開(kāi)發(fā)者KEY", "myApp");
geolocation.getLocation(function(position) {
console.log(position)
lat = position.lat;//緯度
lng = position.lng;//經(jīng)度
});
根據(jù)如上代碼控制臺(tái)現(xiàn)象如：
二：根據(jù)定位在地圖上展示定位
使用到的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：經(jīng)度
//定義map變量 調(diào)用 qq.maps.Map() 構(gòu)造函數(shù) 獲取地圖顯示容器
var map = new qq.maps.Map(document.getElementById("container"), {
center: center, // 地圖的中心地理坐標(biāo)。
zoom:14
});
根據(jù)如上代碼現(xiàn)象如：
2：在地圖上標(biāo)注出當(dāng)前定位點(diǎn)：
根據(jù)上面的我們可以顯示出我們定位的地圖，但是我們無(wú)法看到我們的定位位置在哪，標(biāo)注API就可以讓我們知道我們定位的位子在哪了
標(biāo)注API：
//添加標(biāo)記點(diǎn)
var marker = new qq.maps.Marker({
position: center,
draggable: true,//標(biāo)注點(diǎn)是否可移動(dòng)
map: map
});
如果我們將draggable參數(shù)設(shè)置為true(標(biāo)注點(diǎn)可移動(dòng))，在標(biāo)注點(diǎn)移動(dòng)結(jié)束后會(huì)觸發(fā)dragend事件
//標(biāo)注點(diǎn)拖拽事件
qq.maps.event.addListener(marker, 'dragend', function(event) {
console.log(event)
lat = event.latLng.getLat() //緯度
lng = event.latLng.getLng() //經(jīng)度
});
根據(jù)如上現(xiàn)象如：
移動(dòng)標(biāo)注點(diǎn)控制臺(tái)現(xiàn)象如：
3：在地圖上顯示提示信息
提示窗API：
//添加到提示窗
var info = new qq.maps.InfoWindow({
map: map
});
info.open();
//lat：緯度, lng：經(jīng)度
info.setContent('<div style="text-align:center;white-space:nowrap;margin:2px;">' +
'<div>緯度:'+ lat + '</div>' +
'<div>經(jīng)度:'+ lng + '</div>' +
'</div>');
info.setPosition(center);
根據(jù)如上代碼現(xiàn)象如：
4：根據(jù)實(shí)際地址獲取到對(duì)應(yīng)的經(jīng)緯度
地址解析(Geocoder)API：
//調(diào)用地址解析類
var geocoder = new qq.maps.Geocoder({
complete: function (result) {
console.log(result)
lat = result.detail.location.lat;//經(jīng)度
lng = result.detail.location.lng;//緯度
}
})
var searchAddress = '北京市海淀區(qū)海淀大街38號(hào)';//實(shí)際地址
//通過(guò)getLocation();方法獲取位置信息值
geocoder.getLocation(searchAddress);
根據(jù)如上代碼控制臺(tái)現(xiàn)象如：
根據(jù)如上學(xué)習(xí)我的需求實(shí)現(xiàn)代碼如下：
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=開(kāi)發(fā)者KEY"></script>
2：html:
<div> <input type="text" id="search_address" placeholder="請(qǐng)輸入詳細(xì)地址"> <button onclick="searchAddress()">搜索</button> </div> <div id="container" style="height: 400px;width: 500px"></div>
3：js:
window.onload = function(){
//初始化地圖函數(shù) 自定義函數(shù)名init
function init() {
//獲取用戶經(jīng)緯度
var geolocation = new qq.maps.Geolocation("開(kāi)發(fā)者KEY", "myapp");
geolocation.getLocation(function(position) {
console.log(position)
lat = position.lat;//緯度
lng = position.lng;//經(jīng)度
container = 'container';
mapShow(lat, lng, container)
});
}
//調(diào)用初始化函數(shù)地圖
init();
}
/**
* 實(shí)際地址搜索事件
* /
function searchAddress() {
//調(diào)用地址解析類
var geocoder = new qq.maps.Geocoder({
complete: function (result) {
//根據(jù)用戶輸入的詳細(xì)地址獲取到對(duì)應(yīng)的經(jīng)緯度
lat = result.detail.location.lat;//緯度
lng = result.detail.location.lng;//經(jīng)度
container = 'container';
mapShow(lat, lng, container)
}
})
var searchAddress = document.getElementById('search_address').value;//獲取用戶輸入的詳細(xì)地址
//通過(guò)getLocation();方法獲取位置信息值
geocoder.getLocation(searchAddress);
}
/**
* 提示框
* @param info
* @param lat
* @param lng
* @param center
*/
function message(info, lat, lng, center) {
info.open();
//lat：緯度, lng：經(jīng)度
info.setContent('<div style="text-align:center;white-space:nowrap;margin:2px;">' +
'<div>緯度:'+ lat + '</div>' +
'<div>經(jīng)度:'+ 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變量 調(diào)用 qq.maps.Map() 構(gòu)造函數(shù) 獲取地圖顯示容器
var map = new qq.maps.Map(document.getElementById(container), {
center: center, // 地圖的中心地理坐標(biāo)。
zoom:14
});
//添加標(biāo)記點(diǎn)
var marker = new qq.maps.Marker({
position: center,
draggable: true,//標(biāo)注點(diǎn)是否可移動(dòng)
map: map
});
//添加到提示窗
var info = new qq.maps.InfoWindow({
map: map
});
message(info, lat, lng, center)
//標(biāo)注點(diǎn)拖拽事件
qq.maps.event.addListener(marker, 'dragend', function(event) {
console.log(event)
lat = event.latLng.getLat() //緯度
lng = event.latLng.getLng() //經(jīng)度
center = new qq.maps.LatLng(lat, lng);
message(info, lat, lng, center)
});
}
根據(jù)如上實(shí)現(xiàn)：
