文档章节

百度地图插件

 小琴子_小白
发布于 2017/04/07 10:07
字数 333
阅读 3
收藏 0

1、首先导入插件

        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

2、jsp页面上显示地图的位置

      <tr>
        <th>经度</th>
        <td><form:input path="jd" readonly="true"/></td>
        <th>纬度</th>
        <td><form:input path="wd" readonly="true"/></td>
    </tr>
    <tr>
        <td colspan="4">
            <div style="border:1px solid #FF0000;padding:5px;margin:3px;width:300px">
                  <font style="font-size:14px;font-weight:bold; font-family:\'宋体\'">鼠标移置地图内,右击添加项目标注</font>
            </div>
        </td>
    </tr>
    <tr>
       <td colspan="4"><div id="container" style="position:relative; left:20px; top: 0px; width:95%; height:340px"></div></td>
    </tr>

3、加上地图样式

<script type="text/javascript">
var lng=$("#jd").val();
var lat=$("#wd").val();
var map = new BMap.Map("container");  
var has=0;
var contextMenu = new BMap.ContextMenu();
var txtMenuItem = [
{
    text:'在此添加标注',
    callback:function(p){
        if(has==0){
            var marker = new BMap.Marker(p);
            marker.enableDragging();  
            marker.addEventListener("dragend", function(e){  
                $("#jd").val(e.point.lng);
                $("#wd").val(e.point.lat);
            });
            map.addOverlay(marker);
            $("#jd").val(p.lng);
            $("#wd").val(p.lat);
            has=1;
        }else{
            alert("您已经标注了项目位置,请拖动标注来修改项目位置");
        }
   }
  }
 ];
 for(var i=0; i < txtMenuItem.length; i++){
  contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
  if(i==1 || i==3) {
   contextMenu.addSeparator();
  }
 }
 
 if(lng>0&&lat>0){
        point=new BMap.Point(lng,lat);
        map.centerAndZoom(point, 16); 
        map.addControl(new BMap.NavigationControl());  
        map.addContextMenu(contextMenu);
        var marker = new BMap.Marker(point);
        marker.enableDragging();  
        marker.addEventListener("dragend", function(e){
            $("#jd").val(e.point.lng);
            $("#wd").val(e.point.lat);
        });
        map.addOverlay(marker);
        has=1;
}else{
        //创建地址解析器实例  
        var myGeo = new BMap.Geocoder();  
        myGeo.getPoint("越溪"
                ,function(point){
                     if (point) {
                         map.centerAndZoom(point, 16); 
                            map.addControl(new BMap.NavigationControl());  
                            map.addContextMenu(contextMenu);
                     }
        },"苏州市");}
}
</script>

 

 

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 13
码字总数 5035
作品 0
苏州
私信 提问
fedkey/UEditor-KityFormula-for-wordpress

基本信息 UEditor-KityFormula for wordpress基于Ueditor,UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,轻量,可定制,用户体验好。本插件将wordpress与ueditor编辑...

fedkey
01/04
0
0
ECharts+BaiduMap+HT for Web网络拓扑图应用

前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图、ECharts和HT for Web三者结合起来也做一个类似空气质量报...

xhload3d
2015/10/01
686
0
百度地图、ECharts整合HT for Web网络拓扑图应用

前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图、ECharts和HT for Web三者结合起来也做一个类似空气质量报...

xhload3d
2015/03/23
5.6K
6
百度地图定位 Cordova 插件--cordova-plugin-baidumaplocation

百度地图定位Cordova插件,支持Android,IOS 可以在此地址查看example 基于百度地图Android版定位SDK(v7.1)以及百度地图IOS SDK (v3.2.1) 一,申请Android及IOS版密钥 申请密钥Android定...

aruis
2017/02/26
1K
0
HTML5+ 百度地图插件--H5P.Plugins.maps.BaiDu

H5P.Plugins.maps.BaiDu 为 HTML5+ 百度地图插件实现,目录结构如下: Android Android 地图插件 Native 层实现 iOS iOS 地图插件 Native 层实现 js 地图插件 JS Api 实现...

孔小菜
2015/04/28
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 白掌柜说了卖货不卖身

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @爱漫爱 :这是一场修行分享羽肿的单曲《Moony》 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :开不开心? 开心呀, 我又不爱睡懒觉…...

小小编辑
今天
9
0
大数据教程(11.7)hadoop2.9.1平台上仓库工具hive1.2.2搭建

上一篇文章介绍了hive2.3.4的搭建,然而这个版本已经不能稳定的支持mapreduce程序。本篇博主将分享hive1.2.2工具搭建全过程。先说明:本节就直接在上一节的hadoop环境中搭建了! 一、下载apa...

em_aaron
今天
3
0
开始看《JSP&Servlet学习笔记》

1:WEB应用简介。其中1.2.1对Web容器的工作流程写得不错 2:编写Servlet。搞清楚了Java的Web目录结构,以及Web.xml的一些配置作用。特别是讲了@WebServlet标签 3:请求与响应。更细致的讲了从...

max佩恩
今天
4
0
mysql分区功能详细介绍,以及实例

一,什么是数据库分区 前段时间写过一篇关于mysql分表的的文章,下面来说一下什么是数据库分区,以mysql为例。mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面(可...

吴伟祥
今天
5
0
SQL语句查询

1.1 排序 通过order by语句,可以将查询出的结果进行排序。放置在select语句的最后。 格式: SELECT * FROM 表名 ORDER BY 排序字段ASC|DESC; ASC 升序 (默认) DESC 降序 1.查询所有商品信息,...

stars永恒
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部