百度地图API地点搜索-获取经纬度

分享一下地图上的地点搜索和鼠标点击获取地点经纬度,这些都是地图比较基本和实用的代码,其中还包括了根据用户IP进行地图的显示、改变地图上的鼠标样式、启用滚轮缩放等,算是半入门吧,其他的一些可以自己参考百度的地图API

<!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); 
 function sear(result){//地图搜索 
 	var local = new BMap.LocalSearch(map, { 
   		renderOptions:{map: map} 
 	}); 
 	local.search(result); 
 } 
 </script> 
 	<h2 >教程:<a href="http://blog.yourtion.com/baidu-maps-search-get-lonlat.html" title="百度地图API地点搜索-获取经纬度">百度地图API地点搜索-获取经纬度</a></h2> 
 	<h3>输入地点然后点击“地图上找”搜索,点击地图地点获取相应经纬度</h3> 
 <script type="text/javascript"> 
   var _gaq = _gaq || []; 
   _gaq.push(['_setAccount', 'UA-12599330-14']); 
   _gaq.push(['_trackPageview']); 
  
   (function() { 
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
   })(); 
 </script> 
 </body> 
 </html> 

 

转载于:https://www.cnblogs.com/-mrl/p/5162571.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值