百度API:
http://lbsyun.baidu.com/
,需要了解的可以进入官网进行学习。
本案例使用js定位获取。
本案例使用js定位获取。
<!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>百度地图</title>
<style type="text/css">
html{
height:100%;
}
body{
height:100%;
margin:0px;
padding:0px;
}
#container{
height:100%;
}
</style>
<script src="
http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
</head>
<body>
<input type="text" id="cityName" value="衡阳"/>
<input type="button" οnclick="setCity()" value="查找" />
<p id="aa"></p>
<div id="container" style="width:1024px;height:600px;"></div>
<script type="text/javascript">
//在指定的容器内创建地图实例,之后需要调用Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作。
var map = new BMap.Map("container"); //在container容器中创建一个地图,参数container为div的id属性;
var point = new BMap.Point(112.6,27.25); //以指定的经度和纬度创建一个地理点坐标。
//如果center类型为Point时,zoom必须赋值,范围3-19级,若调用高清地图(针对移动端开发)时,zoom可赋值范围为3-18级。如果center类型为字符串时,比如“北京”,zoom可以忽略,地图将自动根据center适配最佳zoom级别。
map.centerAndZoom(point, 14); //初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(); //激活滚轮调整大小功能
map.addControl(new BMap.NavigationControl()); //添加控件:缩放地图的控件,默认在左上角;
map.addControl(new BMap.MapTypeControl()); //添加控件:地图类型控件,默认在右上方;
map.addControl(new BMap.ScaleControl()); //添加控件:地图显示比例的控件,默认在左下方;
map.addControl(new BMap.OverviewMapControl()); //添加控件:地图的缩略图的控件,默认在右下方; TrafficControl
var search = new BMap.LocalSearch("中国", {
onSearchComplete: function(result){
if (search.getStatus() == BMAP_STATUS_SUCCESS){
var res = result.getPoi(0);
var point = res.point;
map.centerAndZoom(point, 11);
}
},renderOptions: { //结果呈现设置,
map: map,
autoViewport: true,
selectFirstResult: true
} ,onInfoHtmlSet:function(poi,html){//标注气泡内容创建后的回调函数,有了这个,可以简单的改一下返回的html内容了。
alert(html.innerText);
}//这一段可以不要,只不过是为学习更深层次应用而加入的。
});
//给地图添加点击事件获取经度,纬度
map.addEventListener("click",function(e){
document.getElementById("aa").innerHTML = "经度坐标:"+e.point.lng+" 纬度坐标:"+e.point.lat;
});
function setCity(){
search.search(document.getElementById("cityName").value);
}
search.search(document.getElementById("cityName").value);
</script>
</body>
</html>