使用百度地图实现拖动定位、搜索定位
2017-07-29 08:36
393 查看
该代码主要的技术点：
==>获取百度地图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 +
"<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>
==>获取百度地图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 +
"<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- DevExpress.LookUpEdit控件实现自动搜索定位功能 兼使用方法（looUpEdit可编辑）
- Flex中Tree组件实现导航树搜索定位功能及Tree组件的的使用要点
- 使用百度地图实现基本的地图显示与定位功能
- Android学习笔记之使用百度地图实现Poi搜索
- 百度地图实现普通地图、定位、周边搜索功能
- DevExpress.LookUpEdit控件实现自动搜索定位功能 兼使用方法（looUpEdit可编辑）
- android使用百度地图、定位SDK实现地图和定位功能！(最新、可用+吐槽)
- 百度地图 定位，地图中心坐标，拖动后获取地图中心点坐标，poi搜索
- Android百度地图实现搜索和定位及自定义图标绘制并点击时弹出泡泡
- 使用百度地图实现基本的地图显示与定位功能
- 百度地图的简单使用（定位、画区域、线路规划、搜索）
- 使用百度地图进行区域搜索与定位
- 百度地图获取定位，实现拖动marker定位，返回具体的位置名
- iOS 使用百度地图，仿滴滴打车的定位方法。拖动时时定位
- 百度地图的使用（2）_实现定位功能
- 使用jquery简单实现腾讯地图的地址搜索定位功能
- 百度地图使用教程（二）-------- 定位实现
- iOS 使用百度地图，仿滴滴打车的定位方法。拖动时时定位
- android使用百度地图、定位SDK实现地图和定位功能！(最新、可用+吐槽)
- Android百度地图实现搜索和定位及自定义图标绘制并点击时弹出泡泡