百度地图地点搜索和鼠标点击地点获取经纬度

百度地图地点搜索和鼠标点击地点获取经纬度,这些都是地图比较基本

效果图:如下

代码部分:

<!DOCTYPE html>
<html> 
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="description" content="百度地图地点搜索和鼠标点击地点获取经纬度,这些都是地图比较基本" />
    <meta name="keywords" content="百度地图,地点搜索,获取经纬度,改变地图鼠标样式,启用滚轮缩放" />
    <title>百度地图API地点搜索-获取经纬度DEMO</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    <style type="text/css">*{ font-family: "微软雅黑";} #where,#lonlat,#lonlat2{ width:300px; height:30px; font-size:24px; color:blue;} #but{ width:100px; height:36px; font-size:20px;}</style></head>
 
  <body>
    <center>
      <form>
        <div style=" margin:auto;width:1000px;height:600px;border:2px solid gray; margin-bottom:50px;" id="container"></div>
        <h3 style="color: red;">介绍:输入地点然后点击“地图查找”搜索,再点击地图地点获取相应经纬度</h3>
        <label>输入地点:</label>
        <input id="where" name="where" type="text" placeholder="请输入地址">
        <input id="but" type="button" value="地图查找" onClick="sear(document.getElementById(‘where‘).value);" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 经度:
        <input id="lonlat" name="lonlat" type="number" maxlength="10">纬度:
        <input id="lonlat2" name="lonlat2" type="number" maxlength="9"></form></center>
  </body>
</html>
<script type="text/javascript">

//如果经纬度没有给个默认值
   var longitude=105.386515;
 var latitude=28.91124;
  
   var map = new BMap.Map("container");
  map.setDefaultCursor("crosshair");
  map.enableScrollWheelZoom();
  var point = new BMap.Point(longitude,latitude);
  map.centerAndZoom(point, 13);
  var gc = new BMap.Geocoder();
  map.addControl(new BMap.NavigationControl());
  map.addControl(new BMap.OverviewMapControl());
  map.addControl(new BMap.ScaleControl());
  map.addControl(new BMap.MapTypeControl());
  map.addControl(new BMap.CopyrightControl());
  var marker = new BMap.Marker(point);
  map.addOverlay(marker);
  marker.addEventListener("click",
  function(e) {
    document.getElementById("lonlat").value = e.point.lng;
    document.getElementById("lonlat2").value = e.point.lat;
  });
  marker.enableDragging();
  marker.addEventListener("dragend",
  function(e) {
    gc.getLocation(e.point,
    function(rs) {
      showLocationInfo(e.point, rs);
    });
  });
  function showLocationInfo(pt, rs) {
    var opts = {
      width: 250,
      height: 150,
      title: "当前位置"
    };
    var addComp = rs.addressComponents;
    var addr = "当前位置:" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";
    addr += "纬度: " + pt.lat + ", " + "经度:" + pt.lng;
    var infoWindow = new BMap.InfoWindow(addr, opts);
    marker.openInfoWindow(infoWindow);
  }
  map.addEventListener("click",
  function(e) {
    document.getElementById("lonlat").value = e.point.lng;
    document.getElementById("lonlat2").value = e.point.lat;
  });
  var traffic = new BMap.TrafficLayer();
  map.addTileLayer(traffic);
  function iploac(result) {
    var cityName = result.name;
  }
  var myCity = new BMap.LocalCity();
  myCity.get(iploac);
  function sear(result) {
    var local = new BMap.LocalSearch(map, {
      renderOptions: {
        map: map
      }
    });
    local.search(result);
  }

</script>

时间: 2024-10-13 22:30:47

百度地图地点搜索和鼠标点击地点获取经纬度的相关文章

C#实现百度地图附近搜索&amp;调用JavaScript函数

前一篇文章"C#调用百度地图API入门&解决BMap未定义问题"讲述了如何通过C#调用百度API显示地图,并且如何解决BMap未定义的问题.这篇文章主要更加详细的介绍百度地图的一些功能,包括附近搜索.城市搜索.路线规划.添加覆盖物等等. 希望文章对你有所帮助!如果文章中有不足之处,还请海涵~ 百度官方文档:http://developer.baidu.com/map/jsmobile.htm 官方DEMO例:http://developer.baidu.com/map/jsde

百度地图里面搜索到的公司商家电话导出表格?怎样将把百度地图里面搜索到的公司 电话 地址 等数据导出excel里?

好多人在问:如何将百度地图里面搜索到的公司商家电话导出表格?怎样将把百度地图里面搜索到的公司 电话 地址 等数据导出excel里? 现在,很多人都在网络上找商家,联系业务. 百度地图里有很多的商家联系方式地址等数据,这便成为很多人的便捷方式.但是一个个地复制出来商家的电话,地址是一件很痛苦的事情, 于是想到开发一个程序,模拟人的操作,将所有的数据提取保存到EXCEL里. 交流学习QQ:3125547039 主要代码思路: m_objConnection.Open();             b

【百度地图API】如何判断点击的是地图还是覆盖物?

原文:[百度地图API]如何判断点击的是地图还是覆盖物? 摘要:很多API爱好者问我,为什么我点击的是marker,而map也会响应该事件呢?怎样才能判断,我点击的是标注,还是地图呢?下面一起来看看. ------------------------------------------------------------ 先看看地图有哪些事件,查看官网类参考,翻到事件: 大家看到这里的参数了麽? 其实,在点击物体时,通过这些参数就能够判断所点击的物体是什么了. 用marker举例: 先创建一个m

百度地图覆盖物多边形拖动,点击,生成新的覆盖物

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">

Android 百度地图 热点搜索(二)

1.相关接口及方法: ①  OnGetPoiSearchResultListener接口  搜索结果监听 OnGetPoiSearchResultListener poiListener = new OnGetPoiSearchResultListener(){ public void onGetPoiResult(PoiResult result){ //获取POI检索结果 } public void onGetPoiDetailResult(PoiDetailResult result){

百度地图实时侦听鼠标滚轮获取地图zoom缩放级别

百度地图api提供的获取地图缩放级别的方法比较单一,就一个getZoom()方法,这个方法能够获取一次地图缩放级别,后面随着鼠标滚轮的滚动,地图缩放级别被改变,就无法再获取地图缩放级别了,具体api参考:http://developer.baidu.com/map/reference/index.php?title=Class:%E6%9E%81%E9%80%9F%E7%89%88%E6%A0%B8%E5%BF%83%E7%B1%BB/map 如题,若想实时获取地图的缩放级别,小博主是这样做的,

关于百度地图InfoWindow响应自定义布局点击事件

大概讲解: 在百度地图上显示一个marker,当marker被点击后,显示自定义的View.当自定义的View被点击后,响应不同Button的点击事件.被百度这个infowindo里面的view坑惨了,一直以为不能点击呢??原来里面的view可以点击也可以被响应!! 先看效果图: 备注:点击详情(进入此任务详情.点击导航进入百度导航) 代码如下:  baiduMap.setOnMarkerClickListener(new BaiduMap.OnMarkerClickListener() { @

百度地图路线搜索

public class MainActivity extends MapActivity {       private MapView mapView;//百度地图的相关控件     private BMapManager bMapManager;//加载地图的引擎     private String keyString = "04763B1D8C925195965E838C6E59DB767DAE4BA7";//百度地图的key     private MapControlle

[android] 百度地图开发 (三).定位当前位置及getLastKnownLocation获取location总为空问题

       前一篇百度地图开发讲述"(二).定位城市位置和城市POI搜索",主要通过监听对象MKSearchListener类实现城市兴趣点POI(Point of Interest)搜索.该篇讲述定位当前自己的位置及使用getLastKnownLocation获取location总时为空值的问题. 一. 定位当前位置的原理及实现       定位当前位置可以通过LBS(Location Based Service,基于位置的服务),主要工作原理是利用无线网络Network或GPS定