<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html {
100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
#allmap {
height: 700px;
100%;
}
#r-result {
100%;
font-size: 14px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4IU3oIAMpZhfWZsMu7xzqBBAf6vMHcoa"></script>
<title>城市名定位</title>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">
地址: <input id="cityName" type="text" style="100px; margin-right:10px;" />
<input type="button" value="查询" onclick="theLocation()" />
经度:<input type="text" id="jd" />纬度<input type="text" id="wd" />
</div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap", {
mapType: BMAP_HYBRID_MAP,
minZoom: 4,
maxZoom: 25,
enableMapClick:false
});
var point = new BMap.Point(116.331398, 39.897445);
map.enableScrollWheelZoom(true);
map.setDefaultCursor("crosshair");
map.centerAndZoom('广州', 11);
map.addEventListener("click", function (e) {
var input = document.getElementById('wd');
var input2 = document.getElementById('jd');
input.value = e.point.lng;
input2.value = e.point.lat;
});
map.addControl(new BMap.NavigationControl());
var local = new BMap.LocalSearch(map, {
renderOptions: {
map: map
}
});
function theLocation() {
var city = document.getElementById("cityName").value;
if (city != "") {
local.search(city);
}
}
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
//添加控件和比例尺
function add_control(){
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.addControl(top_right_navigation);
}
add_control()
</script>