您的位置：首页 > Web前端 > HTML5

html5之调用百度地图

2014-04-18 10:54 274 查看

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百度地图API地点搜索-获取经纬度DEMO</title> <meta name="description" content="百度地图地点搜索和鼠标点击地点获取经纬度，这些都是地图比较基本和实用的代码，其中还包括了根据用户IP进行地图的显示、改变地图上的鼠标样式、启用滚轮缩放" /> <meta name="keywords" content="百度地图,地点搜索,获取经纬度,改变地图鼠标样式,启用滚轮缩放" /> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> </head> <body> <form action="" method="get"> <label >地点：</label> <input id="where" name="where" type="text" > <input type="button" value="地图上找" onClick="sear(document.getElementById('where').value);" /> <br /> <div style="width:520px;height:340px;border:1px solid gray" id="container"></div> <br /> 经纬度： <input id="lonlat" name="lonlat" type="text"> </form> <script type="text/javascript"> var map = new BMap.Map("container");//在指定的容器内创建地图实例 map.setDefaultCursor("crosshair");//设置地图默认的鼠标指针样式 map.enableScrollWheelZoom();//启用滚轮放大缩小，默认禁用。 map.centerAndZoom(new BMap.Point(116.124878, 24.309178), 13); map.addControl(new BMap.NavigationControl()); map.addEventListener("click", function(e){//地图单击事件 document.getElementById("lonlat").value = e.point.lng + ", " + e.point.lat; }); function iploac(result){//根据IP设置地图中心 var cityName = result.name; map.setCenter(cityName); } var myCity = new BMap.LocalCity(); myCity.get(iploac);//根据ip设置地图中心 function sear(result){//地图搜索 var local = new BMap.LocalSearch(map, { renderOptions:{map: map} }); local.search(result); } </script>

</body> </html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航