<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf8719&v=1.1&services=true"></script>
<script type="text/javascript">
function getAddr() {
var map = document.getElementById("dituContent");
var a = 1;
if (a == 1) {
a = 2;
initMap();
}
else {
if (map.style.display == "none") {
map.style.display = "block";
initMap();
} else {
map.style.display = "none";
}
}
}
</script>
<body onload="getAddr();">
<div id="divContent">
<div>
<table>
<tr>
<td style="min-width: 35; border-top: 50">
<table style="content: no-open-quote">
<tr>
<td style="text-align: right;">
</td>
<td style="text-align: left;" class="style8" colspan="2">
</td>
</tr>
<tr>
<td style="text-align: right;">
<span class="MD_spaninput"> </span>
</td>
<td style="text-align: left;">
</td>
<td style="text-align: left;">
</td>
</tr>
<tr>
<td style="text-align: right;">
</td>
<td style="text-align: left;">
</td>
<td style="text-align: left;">
</td>
</tr>
<tr>
<td style="text-align: right;">
</td>
<td style="text-align: left;">
</td>
<td style="text-align: left;">
</td>
</tr>
<tr>
<td style="text-align: right;">
</td>
<td style="text-align: left;">
<input id="i_IdentityCard1" name="n_IdentityCard1" type="text" value="" />
</td>
<td style="text-align: left;">
<input id="Button3" class="btn_3zico" type="button" value="标注地址" onclick="getAddr()" />
</td>
</tr>
<tr>
<td>
</td>
<td style="text-align: left;">
</td>
<td style="text-align: left;">
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td rowspan="6">
<div style="width: 1555px; height: 800px; border: #ccc solid 1px; margin-left: 20px;
float: left; display: block" id="dituContent">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<!--选择后地图的坐标-->
<input type="hidden" id="lng" name="n_lng" />
<input type="hidden" id="lat" name="n_lat" />
</body>
</html>
<script type="text/javascript">
//创建和初始化地图函数:
function initMap() {
createMap(); //创建地图
setMapEvent(); //设置地图事件
var gc = new BMap.Geocoder();
var opts = {
width: 300, // 信息窗口宽度 如果指定的宽度为0,则信息窗口的宽度将按照其内容自动调整
height: 0, // 信息窗口高度 如果指定的高度为0,则信息窗口的高度将按照其内容自动调整
title: "《这里是标题》", // 信息窗口标题
enableMessage: false //设置允许信息窗发送短息
//message:"亲耐滴,晚上一起吃个饭吧?戳看下地址喔~" //这个是指短信内容
}
map.addEventListener("click", function (e) {
var pt = e.point;
gc.getLocation(pt, function (rs) {
var addComp = rs.addressComponents;
var addr;
addr = addComp.city + addComp.district + addComp.street + addComp.streetNumber;
var infoWindow = new BMap.InfoWindow(addr, opts);
map.clearOverlays(); //删除之前标注
var marker = new BMap.Marker(pt);
map.addOverlay(marker);
marker.openInfoWindow(infoWindow);
document.getElementById("i_IdentityCard1").value = addr;
document.getElementById("lng").value = pt.lng;
document.getElementById("lat").value = pt.lat;
});
});
}
//创建地图函数:
function createMap() {
var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint("龙岩", function (point) {
if (point) {
map.centerAndZoom(point, 14);
}
}, "太原");
window.map = map; //将map变量存储在全局
}
function createMaps() {
var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint(document.getElementById("address").value, function (point) {
if (point) {
map.centerAndZoom(point, 14);
}
}, document.getElementById("address").value);
window.map = map; //将map变量存储在全局
}
//地图事件设置函数:
function setMapEvent() {
map.enableDragging(); //启用地图拖拽事件,默认启用(可不写)
map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
map.enableDoubleClickZoom(); //启用鼠标双击放大,默认启用(可不写)
map.enableKeyboard(); //启用键盘上下左右键移动地图
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控
百度地图api获取地图上选区位置地址和坐标的网页小demo
1星 需积分: 35 151 浏览量
2016-04-27
16:07:36
上传
评论
收藏 2KB ZIP 举报
蜗牛丶哥
- 粉丝: 1
- 资源: 3
最新资源
- windows下NTFS文件系统读取.zip
- windows程序设计课程 相关代码.zip
- Windows via C++图书代码,升级Windows SDK 到10.zip
- matlab基于扩张卡尔曼滤波的磷酸铁锂蓄电池SOC检测,给出了电池模型和算法实现过程.zip
- matlab基于卡尔曼滤波的磷酸铁锂蓄电池SOC检测
- STM8S003F3P6最小系统AD版(包含原理图、PCB源文件)
- smg.uvproj
- nextjs turbo build
- mysql-connector-j-8.0.31.jar
- MATLAB Appdesigner 设计天气预报小程序:全国各城市天气查询系统Weather-capturer-v3
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈