文档章节

百度地图插件

 小琴子_小白
发布于 2017/04/07 10:07
字数 333
阅读 3
收藏 0
点赞 0
评论 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
ios开发百度高德地图经纬度相互转换的算法解析

首先科普一下,经纬度这东西.GPS公司的经纬度算是 地球坐标系,高德地图的,是经过国家加密过得经纬度, 称之为火星坐标. 高德地图是火星坐标的二次加密. 完事儿上代码. // 百度转高德 -(void)b...

qq_35122556
04/20
0
0
Android版添加phonegap-百度地图插件教程

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

大街小巷
2015/12/21
20
0
iOS开发中的火星坐标系及各种坐标系转换算法

其原理是这样的:保密局开发了一个系统,能将实际的坐标转换成虚拟的坐标。所有在中国销售的数字地图必须使用这个系统进行坐标转换之后方可上市。这是生产环节,这种电子地图被称为火星地图。...

刀客445
2016/02/23
1K
1
在Arcmap中加载互联网地图资源的4种方法

在Arcmap中加载互联网地图资源的4种方法 前一段时间想在Arcmap中打开互联网地图中的地图数据,如影像数据、基础地图数据等,经过简单研究目前总结了四种方法,整理下与大家分享,有些内容可能...

猪猪daxia
2015/06/09
0
0
【高德地图API】从零开始学高德JS API(六)坐标转换

摘要:如何从GPS转到谷歌?如何从百度转到高德?这些都是小case。我们还提供,如何将基站cell_id转换为GPS坐标? ----------------------------------------------------------------------...

酸奶小妹GIS
2014/06/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

用Python绘制红楼梦词云图,竟然发现了这个!

Python在数据分析中越来越受欢迎,已经达到了统计学家对R的喜爱程度,Python的拥护者们当然不会落后于R,开发了一个个好玩的数据分析工具,下面我们来看看如何使用Python,来读红楼梦,绘制小...

猫咪编程
19分钟前
0
0
Java中 发出请求获取别人的数据(阿里云 查询IP归属地)

1.效果 调用阿里云的接口 去定位IP地址 2. 代码 /** * 1. Java中远程调用方法 * http://localhost:8080/mavenssm20180519/invokingUrl.action * @Title: invokingUrl * @Description: * @ret......

Lucky_Me
41分钟前
1
0
protobuf学习笔记

相关文档 Protocol buffers(protobuf)入门简介及性能分析 Protobuf学习 - 入门

OSC_fly
昨天
0
0
Mybaties入门介绍

Mybaties和Hibernate是我们在Java开发中应用的比较多的两个ORM框架。当然,目前Mybaties正在慢慢取代Hibernate,这是因为相比较Hibernate而言Mybaties性能更好,响应更快,更加灵活。我们在开...

王子城
昨天
2
0
编程学习笔记之python深入之装饰器案例及说明文档[图]

编程学习笔记之python深入之装饰器案例及说明文档[图] 装饰器即在不对一个函数体进行任何修改,以及不改变整体的原本意思的情况下,增加函数功能的新函数,因为这个新函数对旧函数进行了装饰...

原创小博客
昨天
0
0
流利阅读笔记33-20180722待学习

黑暗中的生物:利用奇技淫巧快活生存 Daniel 2018-07-22 1.今日导读 如果让你在伸手不见五指的黑暗当中生存,你能熬过几天呢?而大千世界,无奇不有。在很多你不知道的角落,有些生物在完全黑...

aibinxiao
昨天
6
0
Hystrix降级逻辑中如何获取触发的异常

通过之前Spring Cloud系列教程中的《Spring Cloud构建微服务架构:服务容错保护(Hystrix服务降级)》一文,我们已经知道如何通过Hystrix来保护自己的服务不被外部依赖方拖垮的情况。但是实际...

程序猿DD
昨天
1
0
gin endless 热重启

r := gin.New()r.GET("/", func(c *gin.Context) {c.String(200, config.Config.Server.AppId)})s := endless.NewServer(":8080", r)s.BeforeBegin = func(add string) ......

李琼涛
昨天
1
0
JAVA模式之代理模式

平时一直在用spring,spring中最大的特效IOC和AOP,其中AOP使用的就是代理模式.闲着无聊,随手写了一个代理模式,也记录下代理模式的实现Demo. 比如现在有一个场景是:客户想要增加一个新的功能,...

勤奋的蚂蚁
昨天
0
0
ES15-JAVA API 索引管理

1.创建连接 创建连接demo package com.sean.esapi.client;import java.net.InetSocketAddress;import org.elasticsearch.action.get.GetResponse;import org.elasticsearch.clien......

贾峰uk
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部