使用百度地图实现拖动定位、搜索定位
该代码主要的技术点：
==>获取百度地图key，也就是ak;
==>拖动定位，经纬度、详细地址
==>搜索定位，根据所搜索得地址进行地图地位，精确定位。
具体的实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="../javascript/jquery-1.9.1.min.js">script>
<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>
<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: 24px;
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 + "
";
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 + "
经度：" + poi.point.lng + "
纬度：" + poi.point.lat;
var infoWindow = new BMap.InfoWindow(" "
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>