zoukankan      html  css  js  c++  java
  • JSP界面引用百度地图获取坐标

    需求:

    需要在JSP界面上引用百度地图,文本框中输入地址之后,自动拿到在百度地图上的经纬度

    解决步骤:

    1、引入百度地图api:

    head中进行引用<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

    1.3以上版本需要key,有点麻烦

    2、html body内部定义容器来放置地图:

    <div id="container" style="position:absolute;margin-top:30px;400px;height:400px;overflow:hidden;"></div>

    3、定义触发来源:

    假设有个文本框,输入字段之后,文本框失去焦点则进行查询

    <input type="text" name="washaddress" id="washaddress" onblur="search()">

    4、初始化地图:

    在</html>标签之前定义,保证能找到要显示的容器:

    var map=new BMap.Map("container");

    map.centerAndZoom("上海",12);//定义默认显示中心区域和显示比例

    map.enableScrollWheelZoom();//打开滚轮缩放功能

    map.enableContinuousZoom();//打开拖动功能

    var localsearch=new BMap.LocalSearch(map);//定义本地搜索变量

    localsearch.enableAutoViewport();

    5、定义搜索方法:

    function search(){

    map.clearOverlays();//清除之前地图的标记

    var keyword=document.getElementById("washaddress").value;//拿到搜索关键字

    localsearch.setSearchCompleteCallback(function (searchresult){//定义搜索完成回调方法

    var poi=searchresult.getPoi(0);//拿到搜索结果的点,备注:当前只获取了搜索的第一个,其实搜索结果有很多个,这里忽略处理!

    document.getElementById("longitude").value = poi.point.lng;//拿到点的经度
    document.getElementById("latitude").value = poi.point.lat;//拿到点的纬度

    map.centerAndZoom(poi.point, 13);//将地图中心显示为搜索的店

    var marker = new BMap.Marker(new BMap.Point(poi.point.lng,poi.point.lat));//制作新的地图标记
    map.addOverlay(marker);//显示标记

    });

    localsearch.search(keyword);//search进行检索

    }

    完成需求,成功根据text中的内容拿到坐标

  • 相关阅读:
    String
    Xposed源码编译踩坑实录
    Hello 博客园
    HDU 1430 关系映射 + 打表 .
    HDU 1430 关系映射 + 打表 .
    hdu1043 经典的八数码问题 逆向bfs打表 + 逆序数
    hdu1043 经典的八数码问题 逆向bfs打表 + 逆序数
    hdu 1044 BFS(压缩图)+DFS
    hdu 1044 BFS(压缩图)+DFS
    hdu3338 最大流
  • 原文地址:https://www.cnblogs.com/ichemmwangd/p/4626566.html
Copyright © 2011-2022 走看看