文档章节

百度地图插件

 小琴子_小白
发布于 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
苏州
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
百度地图定位 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
国内常见的电子地图坐标介绍

原文作者:西安鲲之鹏 原文链接:http://http://www.site-digger.com/html/articles/20140115/72.html 经常有客户咨询各种电子地图坐标的问题,比如图吧地图坐标如何转谷歌地图坐标?我们在为...

西安鲲之鹏
2015/09/29
583
0

没有更多内容

加载失败,请刷新页面

加载更多

Hadoop - 企业级大数据管理平台CDH(小技巧一)

附上: 喵了个咪的博客:w-blog.cn cloudera官网: https://www.cloudera.com/ 官方文档地址: https://www.cloudera.com/documentation/enterprise/latest.html 一 , 磁盘扩容磁盘迁移 对于磁盘...

喵了_个咪
11分钟前
0
0
手动安装android的sdk

手动安装android的sdk 用eclipse+sdk的方式开发app,使用android sdk manager无法下载新的sdk,可以手动下载安装。 查找sdk的地址 浏览器访问https://dl-ssl.google.com/android/repository/...

kyle960
12分钟前
0
0
call方法的模拟实现

call方法的模拟实现 初步思考 const person = { name:"小明" } function sayName() { console.log(this.name) } sayName.call(person) //result: 小明 上面的代码有两...

lsner
16分钟前
0
0
apache 报错 AH01089: search for temporary

程序上传文件一直失败。经过测试使用apache反向代理会失败,但是直接访问服务器则可以上传。 经过分析apache的错误日志发现如下提示: apache 报错 AH01089: search for temporary director...

硕硕和果果
21分钟前
1
0
java源码Integer.bitCount算法解析,分析原理

看了一道leetcode上面的题 461 ,Hamming Distance 计算两个整数有多少不同的位。其实很简单,取两个整数异或的值,然后计算出里面二进制有多少个1就行了。代码如下: public int hammi...

117
23分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部