使用百度地圖實現拖動定位、搜尋定位
該程式碼主要的技術點：
==>獲取百度地圖key，也就是ak;
==>拖動定位，經緯度、詳細地址
==>搜尋定位，根據所搜尋得地址進行地圖地位，精確定位。
具體的實現程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script type
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../javascript/loadClosed.js"></script>
<script type="text/javascript" src="JSDituJs/baiduditu.js"></
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<style type="text/css">
* {
font-family: "微軟雅黑";
}
#where, #lonlat, #lonlat2 {
width: 300px;
height: 30px;
font-size
color: blue;
}
#but {
width: 100px;
height: 36px;
font-size: 20px;
}
</style>
</head>
<body>
<fieldset style="margin-top: 20px;">
<legend style="font-size: 16px; margin-left: 20px;">選擇站點經緯度座標</legend>
<div style="margin-left: 100px; margin-right: 100px; text-align: center; margin-bottom: 20px;">
要查詢的地址：<input id="text_" type="text" value="青島" style="margin-right: 100px;" />
查詢結果(經緯度)：<input id="result_" type="text" />
<input type="button" value="查詢" onclick="searchByStationName();" />
</div>
<div style="margin: auto; width: 1000px; height: 600px; border: 2px solid gray; margin-bottom: 50px;" id="container"></div>
</fieldset>
</body>
</html>
<script type="text/javascript">
var longitude = 120.391523;
var latitude = 36.067794;
var map = new BMap.Map("container");
map.setDefaultCursor("crosshair");
map.enableScrollWheelZoom();
var point = new BMap.Point(longitude, latitude);
map.centerAndZoom(point, 13);
var gc = new BMap.Geocoder();
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.OverviewMapControl());
//map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角，開啟
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.MapTypeControl());
map.addControl(new BMap.CopyrightControl());
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.addEventListener("click",
function (e) {
document.getElementById("lonlat").value = e.point.lng;
document.getElementById("lonlat2").value = e.point.lat;
});
marker.enableDragging();
marker.addEventListener("dragend",
function (e) {
gc.getLocation(e.point,
function (rs) {
showLocationInfo(e.point, rs);
});
});
function showLocationInfo(pt, rs) {
var opts = {
width: 250,
height: 150,
title: "當前位置"
};
var addComp = rs.addressComponents;
var addr = "當前位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";
addr += "緯度: " + pt.lat + ", " + "經度：" + pt.lng;
$("#jingdu").val(pt.lng);
$("#weidu").val(pt.lat);
$("#xiangxidiqu").val(addComp.province + addComp.city + addComp.district);
var infoWindow = new BMap.InfoWindow(addr, opts);
marker.openInfoWindow(infoWindow);
}
map.addEventListener("click",
function (e) {
document.getElementById("lonlat").value = e.point.lng;
document.getElementById("lonlat2").value = e.point.lat;
});
var traffic = new BMap.TrafficLayer();
map.addTileLayer(traffic);
function iploac(result) {
var cityName = result.name;
}
var myCity = new BMap.LocalCity();
myCity.get(iploac);
function sear(result) {
var local = new BMap.LocalSearch(map, {
renderOptions: {
map: map
}
});
local.search(result);
}
var localSearch = new BMap.LocalSearch(map);
localSearch.enableAutoViewport(); //允許自動調節窗體大小
function searchByStationName() {
map.clearOverlays();//清空原來的標註
var keyword = document.getElementById("text_").value;
localSearch.setSearchCompleteCallback(function (searchResult) {
var poi = searchResult.getPoi(0);
document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;
map.centerAndZoom(poi.point, 13);
var marker11 = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 建立標註，為要查詢的地方對應的經緯度
map.addOverlay(marker11);
marker11.addEventListener("click",
function (e) {
document.getElementById("lonlat").value = e.point.lng;
document.getElementById("lonlat2").value = e.point.lat;
});
marker11.enableDragging();
marker11.addEventListener("dragend",
function (e) {
gc.getLocation(e.point,
function (rs) {
showLocationInfo(e.point, rs);
});
});
function showLocationInfo(pt, rs) {
var opts = {
width: 250,
height: 150,
title: "當前位置"
};
var content = document.getElementById("text_").value + "<br/><br/>經度：" + poi.point.lng + "<br/>緯度：" + poi.point.lat;
var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
marker11.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
marker11.enableDragging();
$("#jingdu").val(poi.point.lng);
$("#weidu").val(poi.point.lat);
$("#xiangxidiqu").val($("#text_").val());
}
});
localSearch.search(keyword);
}
</script>