百度地图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 > |
分类:
PHP&mysql
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· Vue3状态管理终极指南:Pinia保姆级教程