js调用百度地图入门
一 申请秘钥和查询api
百度api地址：http://lbsyun.baidu.com/index.php?title=jspopular/guide/event
二演示在引入百度地图 添加搜索 以及点击获取经纬度
源代码：
<!DOCTYPE html>
<html>
<head>
<title>学习地图</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=SlbtinGAO0W3RyUjlX4B8lUXCqOewGNF">
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
// 定义一个控件类，即function
function SearchControl(){
// 设置默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; //相对于左上角
this.defaultOffset = new BMap.Size(100, 20); //相对于图标左上角的位置
}
// 通过JavaScript的prototype属性继承于BMap.Control
SearchControl.prototype = new BMap.Control();
// 自定义控件必须实现initialize方法，并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
SearchControl.prototype.initialize = function(map){
var div=$("<div><font size='2'>关键字</font><input id='mytext' type='text'><input id='mybtn' type='button' value='查询'></div");
$(map.getContainer()).append(div);//将以上的html添加到地图中覆盖
$("#mybtn").css("border-radius",8);//设置按钮圆角
$("#mybtn").on("click",function(){ //按钮点击后 调用api搜索
var val=$("#mytext").val();
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.search(val);
});
// 将DOM元素返回
return div[0];
}
//地图点击事件 获取经纬度
map.addEventListener("click", function(){
var center = map.getCenter();
alert("地图中心点变更为：" + center.lng + ", " + center.lat);
});
map.addControl(new SearchControl()); //将自定义的控件添加到地图中
</script>
</body>
</html>
效果：
