百度地图api 画面返回经纬度

最新推荐文章于 2023-03-03 09:31:47 发布

繁花丛中

最新推荐文章于 2023-03-03 09:31:47 发布

阅读量368

点赞数

本文链接：https://blog.csdn.net/zp19950116/article/details/112706398

版权

js html 定位

效果图：

代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style>
body {
font-size: 16px;
font-family: verdana;
}

table {
border-collapse: collapse;
font-size: 16px;
font-family: verdana;
}

p {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
padding-top: 0px;
font-size: 16px;
font-family: verdana;
}

td {
padding-right: 0px;
padding-left: 2px;
padding-bottom: 0px;
}

td.nopadding {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
}

input {
height: 20px;
}

input.ul {
border-right: medium none;
border-top: medium none;
border-left: medium none;
border-bottom: #33ff33 1px solid;
}

textarea {
font-size: 16px;
}

#name {
width: 18%;
}
</style>
</head>
<body>
<form>
<div id="toolBar" style="width:100%;height:100%;" >
<div style="width:10%;height:100%;float:left" >
<input type="button" style="width:80%;height:30px;" value="画多边形" οnclick="draw(BMAP_DRAWING_POLYGON)" />
<input type="button" style="width:80%;height:30px;margin-top:5px;" value="清除多边形" οnclick="clearAll()"/>
</div>
<div style="width:85%;height:100%;float:left">
搜索地址:<input id="name" style="width:25%" placeholder="输入后开始查找" />
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

详细地址:<input id="pro" readonly="readonly" placeholder="搜索后点击地图获取" />省
<input id="city" readonly="readonly" placeholder="搜索后点击地图获取" />市
<input id="dis" readonly="readonly" placeholder="搜索后点击地图获取" />区/县
<div style="height:10px;"></div>
<input id="lng" style="width:25%;display:none" readonly="readonly" placeholder="搜索后点击地图获取" />
<input id="lat" style="width:25%;display:none" readonly="readonly" placeholder="搜索后点击地图获取" />
经度组:<input id="lngs" style="width:25%" readonly="readonly" placeholder="搜索后画多边形获取" />
纬度组:<input id="lats" style="width:25%" readonly="readonly" placeholder="搜索后画多边形获取" />
<input id="detailedAddress" style="display:none" />
<input type="button" style="width:100px; height:30px;margin-left:30px;" value="保存" οnclick="save()" />
<input type="button" style="width:100px; height:30px;" value="取消" οnclick="cancel()" />
<div style="height:10px;"></div>
</div>
</div>
<div id="Div1" style="border:1px solid #c0c0c0; width:150px; height: auto; display: none;"></div>
<div id="div_baiduMap" style="margin-top:10px; height: 500px; width: 100%; border: 1px solid silver;"></div>
</form>
</body>
</html>

// 百度地图API功能
function G(id) {
return document.getElementById(id);
}
//var pro = "";//省
//var city = "";//市
//var dis = "";//县
var map = new BMap.Map('div_baiduMap');
var point = new BMap.Point(115.13205688718966, 35.31223193919747);
//设置地图中心点以及放大级别(1-19)
map.centerAndZoom(point, 15);
//允许滚轮缩放
map.enableScrollWheelZoom(true);
//1s后加载地图
window.setTimeout(function () { map.panTo(new BMap.Point(115.13205688718966, 35.31223193919747)); }, 1000);
var opts = { offset: new BMap.Size(10, 5), anchor: BMAP_ANCHOR_TOP_LEFT };
map.addControl(new BMap.NavigationControl(opts));
map.addControl(new BMap.MapTypeControl());//添加地图类型切换控件
map.setCurrentCity("滨州");//当设置城市信息时，MapTypeControl的切换功能才能可用
//创建事件，拖动地图后显示中心坐标
map.addEventListener('dragend', function () {
var center = map.getCenter();
});

//已知点point，点击该点图标marker，显示信息窗口
//var marker = new BMap.Marker(point);//一定要point，不要经纬度
//map.addOverlay(marker);//为该点叠加图标

var geocoder = new BMap.Geocoder();
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{
"input": "name"
, "location": map
});
ac.addEventListener("onhighlight", function (e) { //鼠标放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
G("searchResultPanel").innerHTML = str;

});

//位置搜索并获取到坐标
var myValue;
ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
setPlace();
});

function setPlace() {
map.clearOverlays(); //清除地图上所有覆盖物
function myFun() {
var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
map.centerAndZoom(pp, 18);
//map.addOverlay(new BMap.Marker(pp)); //添加标注

var value_pp = pp.lng + ',' + pp.lat;
$('#shopcoord').val(value_pp);
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}

map.addEventListener("click", function (e) {
var pt = e.point;
//移除原有的标注
//map.clearOverlays();

//var point = new BMap.Point(e.point.lng, e.point.lat);// 创建标注的坐标
//addMarker(point);

geocoder.getLocation(pt, function (rs) {
var addComp = rs.addressComponents;
$("input[id='detailedAddress']").val(rs.address);
$("input[id='pro']").val(addComp.province);
$("input[id='city']").val(addComp.city);
$("input[id='dis']").val(addComp.district);
});

$("input[id='lng']").val(e.point.lng);
$("input[id='lat']").val(e.point.lat);

//添加标注
function addMarker(point) {
var myIcon = new BMap.Icon("mapMarker.png", new BMap.Size(30, 30), {
offset: new BMap.Size(10, 25), // 指定定位位置
imageOffset: 0 // 设置图片偏移
});
}
//var marker = new BMap.Marker(point);
//map.addOverlay(marker);
})

//保存并带回数据
function save() {
var infoobj = {
name: $("input[id='name']").val(),
pro: $("input[id='pro']").val(),
city: $("input[id='city']").val(),
dis: $("input[id='dis']").val(),
lng: $("input[id='lng']").val(),
lat: $("input[id='lat']").val(),
lngs: $("input[id='lngs']").val(),
lats: $("input[id='lats']").val(),
addressName: $("input[id='addressName']").val(),
detailedAddress: $("input[id='detailedAddress']").val()
}
parent.backdataList(infoobj)
}

function cancel() {
parent.layer.closeAll();
}
</script>

繁花丛中

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
百度地图api 画面返回经纬度

效果图：代码：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style> body { fo...
复制链接

扫一扫