1.先引入百度地图
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=获取的key"></script>
2.html代码
<style>
body,html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
#allmap {
height: 500px;
width: 100%;
}
#r-result {
width: 100%;
font-size: 14px;
}
tr {
height: 40px;
}
</style>
<table style="width: 100%">
<tr>
<td align="center">位置及周边</td>
<td colspan="3">
<div id="r-result">
经度: <input id="addhouseLongitude" type="text" style="width:180px;height: 30px; margin-right:10px;" οninput="setMapPosition();" onpropertychange="setMapPosition();"/>(-180 到 180 之间的浮点数)<br/>
纬度: <input id="addhouseLatitude" type="text" style="width:180px;height: 30px; margin-right:10px;" οninput="setMapPosition();" onpropertychange="setMapPosition();"/>(-90 到 90 之间的浮点数)
</div>
<div id="allmap"></div>
</td>
</tr>
</table>
$(document).ready(function() {
// 初始化百度地图
initBaiduMap();
});
/**
*
* 初始化百度地图
*/
function initBaiduMap() {
// 百度地图API功能
map = new BMap.Map("allmap");
map.centerAndZoom("深圳", 13);
//map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.enableScrollWheelZoom(true);
// 设置地图显示的城市 此项是必须设置的
map.setCurrentCity("北京");
// 添加地图类型控件
map.addControl(new BMap.MapTypeControl());
// 左上角,添加比例尺
var top_left_control = new BMap.ScaleControl({
anchor : BMAP_ANCHOR_TOP_LEFT
});
// 左上角,添加默认缩放平移控件
var top_left_navigation = new BMap.NavigationControl();
// 右上角,仅包含平移和缩放按钮
var top_right_navigation = new BMap.NavigationControl({
anchor : BMAP_ANCHOR_TOP_RIGHT,
type : BMAP_NAVIGATION_CONTROL_SMALL
});
/*
* 缩放控件type有四种类型: BMAP_NAVIGATION_CONTROL_SMALL:仅包含平移和缩放按钮;
* BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮; BMAP_NAVIGATION_CONTROL_ZOOM:仅包含缩放按钮
*/
map.addControl(top_left_control);
map.addControl(top_left_navigation);
// map.addControl(top_right_navigation);
// 鼠标点击获取坐标,并设置标注
map.addEventListener("click", function(e) {
$("#addhouseLongitude").val(e.point.lng);
$("#addhouseLatitude").val(e.point.lat);
map.clearOverlays();
var new_point = new BMap.Point(
document.getElementById("addhouseLongitude").value, document
.getElementById("addhouseLatitude").value);
// 创建标注
var marker = new BMap.Marker(new_point);
// 将标注添加到地图中
map.addOverlay(marker);
map.panTo(new_point);
});
}
/**
* 输入经纬度时设置地图坐标
*/
function setMapPosition(){
var x = $("#addhouseLongitude").val();
var y = $("#addhouseLatitude").val();
if(x && y){
setMarkerPosition(x, y);
}
}
/**
* 给地图设置坐标标注
* @param x
* @param y
*/
function setMarkerPosition(x, y) {
map.clearOverlays();
if(x!=undefined || y!=undefined){
var new_point = new BMap.Point(x, y);
// 创建标注
var marker = new BMap.Marker(new_point);
// 将标注添加到地图中
map.addOverlay(marker);
map.panTo(new_point);
}
}
/**
* 用经纬度设置地图中心点
*/
function theLocation() {
if (document.getElementById("addhouseLongitude").value != ""
&& document.getElementById("addhouseLatitude").value != "") {
map.clearOverlays();
var new_point = new BMap.Point(
document.getElementById("addhouseLongitude").value, document
.getElementById("addhouseLatitude").value);
// 创建标注
var marker = new BMap.Marker(new_point);
// 将标注添加到地图中
map.addOverlay(marker);
map.panTo(new_point);
}
}