百度地图api选取经纬度页面

最新推荐文章于 2022-11-21 10:49:01 发布

繁花丛中

最新推荐文章于 2022-11-21 10:49:01 发布

阅读量276

点赞数

文章标签： html js 定位

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

版权

页面效果图：

页面详细代码：

<!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">
搜索公司:<input id="name" style="width:30%" placeholder="输入后开始查找" />
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
地址简称:<input id="addressName" placeholder="请手动输入" />
<div style="height:10px;"></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" readonly="readonly" placeholder="搜索后点击地图获取" />
纬度:<input id="lat" 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 id="Div1" style="border:1px solid #c0c0c0; width:150px; height: auto; display: none;"></div>
<div id="div_baiduMap" style="margin-top:10px; height: 200px; 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(118.019306, 37.497382);
//设置地图中心点以及放大级别(1-19)
map.centerAndZoom(point, 15);
//允许滚轮缩放
map.enableScrollWheelZoom(true);
//1s后加载地图
window.setTimeout(function () { map.panTo(new BMap.Point(118.019306, 37.497382)); }, 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)); //添加标注

//保存并带回数据
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(),
addressName: $("input[id='addressName']").val(),
detailedAddress: $("input[id='detailedAddress']").val()
}
parent.backdata(infoobj)
}

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

繁花丛中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
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 { font-size: 16px;...
复制链接

扫一扫