文档章节

百度地图插件

 小琴子_小白
发布于 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
苏州
私信 提问
百度地图定位 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
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
HTML5+ 百度地图插件--H5P.Plugins.maps.BaiDu

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

孔小菜
2015/04/28
1K
0
Android版添加phonegap-百度地图插件教程

第一步:添加SDK包:【目前为最新的百度地图SDK】 在工程里新建libs文件夹,将开发包里所有文件拷贝到libs根目录下覆盖即可 第二步:SDK包引入项目中 在工程属性->Java Build Path->Librarie...

大街小巷
2015/12/21
20
0

没有更多内容

加载失败,请刷新页面

加载更多

十月开源项目推荐:专为 Python 初学者准备的 IDE 你用过吗?

每月新增开源项目。顾名思义,每月更新一期。我们会从社区上个月新收录的开源项目中,挑选出有价值的、有用的、优秀的、或者好玩的开源项目来和大家分享。数量不多,但我们力求推荐的都是精品...

编辑部的故事
29分钟前
6
0
Java/Android 获取文件夹的文件列表(file.listFiles())并按名称排序,中文优先

排序规则 因为是中国人,习惯性看中文文件夹放前面比较顺眼,所以在别人博客(https://blog.csdn.net/da_caoyuan/article/details/56664673)的基础上,加上了自己的排序规则。 默认排序规则...

她叫我小渝
29分钟前
0
0
RabbitMQ通过shovel插件迁移数据

前言 生产环境中会遇到RabbitMQ数据迁移的场景,例如:切换云服务厂商、不同Region之间数据迁移、新搭建RabbitMQ实例,数据需要同步至新的RabbitMQ实例。 前提条件: 源RabbitMQ实例打开了s...

中间件小哥
33分钟前
0
0
kubernetes 环境搭建

kubernetes 简介:Kubernetes是一个开源的,用于管理云平台中多个主机上的容器化的应用,Kubernetes的目标是让部署容器化的应用简单并且高效(powerful)。 点击此处查看官网详情。...

MrPei
47分钟前
1
0
关于scala macro的example

http://www.bbartosz.com/blog/2016/09/24/fun-with-scalameta-examples-part1/

Littlebox
49分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部