<!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%} */
#container{ 500px; height:500px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
</script>
</head>
<body>
<div>
<input type="text" id='search_text'>
<button onclick="search()">搜索</button>
</div>
<div id="container"></div>
<script type="text/javascript">
//根据搜索内容进行标记
function search(){
var searchText = document.getElementById('search_text').value;
//console.log(searchText)
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上，并调整地图视野
myGeo.getPoint(searchText, function(point){
if (point) {
// console.log(point.lng + "," + point.lat);
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
}
},"曲靖市");
}
// 百度地图
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(103.810846,25.502801); // 创建点坐标
map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
// 添加各类控件
// map.addControl(new BMap.NavigationControl());
// map.addControl(new BMap.ScaleControl());
// map.addControl(new BMap.OverviewMapControl());
// map.addControl(new BMap.MapTypeControl());
//添加缩放控件
var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}
map.addControl(new BMap.NavigationControl(opts));
// 添加标注
// var marker = new BMap.Marker(point); // 创建标注
// map.addOverlay(marker); // 将标注添加到地图中
//获取鼠标点击位置的经纬度
map.addEventListener("click", function(e){
//alert(e.point.lng + ", " + e.point.lat);
map.clearOverlays(); //清除覆盖物
var marker = new BMap.Marker(new BMap.Point(e.point.lng,e.point.lat)); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
});
</script>
</body>
</html>