<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxx">
</script>
</head>
<body>
<div id="container" style="width: 420px; height: 340px; border: 1px solid gray; float: left;"></div>
<p>
纬度：<input name="lng" type="text" id="lng" style="width:200px;" value="120.570464"/>
经度：<input name="lat" type="text" id="lat" style="width:200px;" value="31.300216"/>
标注点所在区域：<input name="address" type="text" id="address" style="width:200px;"/>
</p>
<script type="text/javascript">
// http://lbsyun.baidu.com/jsdemo.htm#a1_2
var map = null;
var initialFunc = function(){
map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
// 自定义控件
map.addControl(new myTest.ZoomControlX());
map.addEventListener("click", function(e){
console.log(e.point.lng + ", " + e.point.lat);
console.log("您点击了地图。");
});
// 拖动地图后地图中心的经纬度信息
map.addEventListener("dragend", function(){
var center = map.getCenter();
console.log("地图中心点变更为：" + center.lng + ", " + center.lat);
});
var zoomendFunc = function(){
console.log("地图缩放至：" + this.getZoom() + "级");
// 移除监听事件
map.removeEventListener("zoomend", zoomendFunc);
};
map.addEventListener("zoomend",zoomendFunc);
// 标注功能：拖动、打标注
myTest.markerTest(map);
// 浏览器定位
myTest.geolocation(map);
};
var myTest = {
geolocation : function(map) {
//关于状态码
//BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。
//BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
//BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。
//BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
//BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。
//BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。
//BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
//BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增)
//BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增)
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
console.log('您的位置：'+r.point.lng+','+r.point.lat);
}
else {
console.log('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
},
// 根据坐标获取地址
geocoder : function Geocoder(point) {
var gc = new BMap.Geocoder();
gc.getLocation(point, function (rs) {
var addComp = rs.addressComponents;
document.getElementById('address').setAttribute('value',addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
},
markerTest : function(map){
// 新坐标
map.clearOverlays();
var pointNew = new BMap.Point(116.404, 39.915);
var marker = new BMap.Marker(pointNew); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(pointNew);
marker.enableDragging(); // 可以拖动
//创建信息窗口
var infoWindow = new BMap.InfoWindow("这就是您公司的位置。<br/>如果不正确，请拖动红色图标");
//显示窗口
marker.openInfoWindow(infoWindow);
//点击监听
marker.addEventListener("click", function () {
this.openInfoWindow(infoWindow);
});
//拖动监听
marker.addEventListener("dragend", function (e) {
//坐标赋值
document.getElementById('lng').setAttribute('value',e.point.lng);
document.getElementById('lat').setAttribute('value',e.point.lat);
myTest.geocoder(e.point);
});
},
ZoomControlX : ((function(){
// 定义一个控件类，即function
function ZoomControl(){
// 设置默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}
// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();
// 自定义控件必须实现initialize方法，并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
ZoomControl.prototype.initialize = function(map){
// 创建一个DOM元素
var div = document.createElement("div");
// 添加文字说明
div.appendChild(document.createTextNode("放大2级"));
// 设置样式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
// 绑定事件，点击一次放大两级
div.onclick = function(e){
map.zoomTo(map.getZoom() + 2);
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
}
return ZoomControl;
})()),
};
initialFunc();
</script>
</body>
</html>
