1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Wx_VehicleLocation.aspx.cs" Inherits="DTMS.WeiXin.wxmgr.govmgr.Wx_VehicleLocation" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.     <!-- #手机浏览器兼容性设置 -->
  9.     <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
  10.     <meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
  11.     <meta content="no-cache" http-equiv="pragma">
  12.     <meta content="0" http-equiv="expires">
  13.     <meta content="telephone=no" name="format-detection" />
  14.  
  15.     <meta content="width=1, initial-scale=1" name="viewport">
  16.     <title>车辆位置</title>
  17.     <link href="../../skin/weui/dist/style/weui.min.css" rel="stylesheet" />
  18.     <script src="../../Scripts/jquery-1.9.1.min.js"></script>
  19.     <style type="text/css">
  20.         #allmap {
  21.             width: 50%;
  22.             height: 50%;
  23.             overflow: hidden;
  24.             margin: 0;
  25.             font-family: "微软雅黑";
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="weui_search_bar" id="search_bar">
  31.         <form class="weui_search_outer" method="post">
  32.             <div class="weui_search_inner">
  33.                 <i class="weui_icon_search"></i>
  34.                 <input type="search" class="weui_search_input" id="search_input" placeholder="输入车牌号码中间四位数字" required />
  35.                 <a href="javascript:" class="weui_icon_clear" id="search_clear"></a>
  36.             </div>
  37.             <label for="search_input" class="weui_search_text" id="search_text">
  38.                 <i class="weui_icon_search"></i>
  39.                 <span>车辆检索</span>
  40.             </label>
  41.  
  42.         </form>
  43.         <a href="javascript:" class="weui_search_cancel" id="search_cancel">取消</a>
  44.     </div>
  45.  
  46.     <div id="vehicleInfo" class="weui_cells weui_cells_access search_show">
  47.  
  48.     </div>
  49.  
  50.     <div id="content" class="content">
  51.  
  52.         <div style="height: 500px; border: 0px solid gray" id="container"></div>
  53.  
  54.     </div>
  55.  
  56. </body>
  57. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=vnUtQo9ngQW4CXlKwnBp2oGc"></script>
  58. <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
  59. <%--百度地图坐标转换js--%>
  60.  
  61. <script type="text/javascript">
  62.  
  63.     //根据经纬度获取具体的地名
  64.     function getAddressByLn() {
  65.         var address = "";
  66.         var map = new BMap.Map("container");
  67.         var gpsPoint = new BMap.Point(ln, la);
  68.         alert("" + ln + "la" + la);
  69.         map.centerAndZoom(gpsPoint, 15);
  70.         map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
  71.         map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
  72.         //添加鼠标滚动缩放
  73.         map.enableScrollWheelZoom();
  74.         //添加缩放平移控件
  75.         map.addControl(new BMap.NavigationControl());
  76.  
  77.         setTimeout(function () {
  78.             BMap.Convertor.translate(gpsPoint, 0, translateCallback);     //真实经纬度转成百度坐标
  79.         }, 1000);
  80.  
  81.         //坐标转换完之后的回调函数
  82.         translateCallback = function (bdpoint) {
  83.  
  84.             var gc = new BMap.Geocoder();
  85.  
  86.             var hh = ("ln" + ln + "la" + la);
  87.             gc.getLocation(bdpoint, function (rs) {
  88.                 var addComp = rs.addressComponents;
  89.  
  90.                 address = ("" + addComp.district + addComp.street + addComp.streetNumber);
  91.                 $("#vehicleLocation").append("<div css='weui_cell' id='adre'><div class='weui_cell_bd weui_cell_primary'>最新位置:" + address + hh + "附近</div</div>");
  92.  
  93.                 //设置标注的图标
  94.                 var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
  95.                     offset: new BMap.Size(10, 25), // 指定定位位置
  96.                     imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
  97.                 });
  98.                 var marker = new BMap.Marker(bdpoint, { icon: myIcon });
  99.                 //把标注添加到地图上
  100.                 map.addOverlay(marker);
  101.                 alert("转化为百度坐标为：" + bdpoint.lng + "," + bdpoint.lat);
  102.  
  103.             });
  104.         }
  105.  
  106.     }
  107.  
  108. </script>
  109.  
  110. </html>

　　

GPS坐标转百度地图并且加载地图示例.支持微信端访问的更多相关文章

  1. 百度地图-省市县联动加载地图 分类： Demo JavaScript 2015-04-26 13:08 530人阅读 评论(0) 收藏

    在平常项目中,我们会遇到这样的业务场景: 客户希望把自己的门店绘制在百度地图上,通过省.市.区的选择,然后加载不同区域下的店铺位置. 先看看效果图吧: 实现思路: 第一步:整理行政区域表: 要实现通过 ...

  2. PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例

    原文:PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例 <!--小幅的坐标转换点位程序--> <!DOCTYPE html> <html&g ...

  3. GPS坐标转换为百度地图坐标

    /** * GPS坐标转换为百度地图坐标 * 需要引入javabase64.jar 和json的一些包 * */ public class Gps2BaiDu { public static void ...

  4. GPS坐标换算为百度坐标

    最近在做一个关于手机定位的小应用,需求是这样的,用户通过手机(Wp8)进行二维码扫描操作并且记录用户的当前位置,在PC上可以查看用户所在地图的位置,做法就是在用户扫描条码时,通过手机GPS获取当前在地 ...

  5. GPS坐标换算为百度坐标(转)

    最近在做一个关于手机定位的小应用,需求是这样的,用户通过手机(Wp8)进行二维码扫描操作并且记录用户的当前位置,在PC上可以查看用户所在地图的位置,做法就是在用户扫描条码时,通过手机GPS获取当前在地 ...

  6. 带你剖析WebGis的世界奥秘----瓦片式加载地图（转）

    带你剖析WebGis的世界奥秘----瓦片式加载地图 转:https://zxhtom.oschina.io/zxh/20160805.html  编程  java  2016/08/05 0留言,  ...

  7. 解决ArcGIS API for Silverlight 加载地图的内外网访问问题

    原文:解决ArcGIS API for Silverlight 加载地图的内外网访问问题 先上一个类,如下: public class BaseClass { public static string ...

  8. MapXtreme在asp.net中的使用之加载地图(转)

    MapXtreme在asp.net中的使用之加载地图(转) Posted on 2010-05-04 19:44 Happy Coding 阅读(669) 评论(0) 编辑 收藏 1.地图保存在本地的 ...

  9. cocos2d-x游戏开发系列教程-坦克大战游戏加载地图的编写

    上节课写了关卡选择场景,那么接下来写关卡内容,先写最基本的地图的加载 我们新建一个场景类,如下所示: class CityScene : public cocos2d::CCLayer { publi ...

随机推荐

  1. UNIX标准化及实现之基本系统数据类型

    历史上,某些UNIX系统变量已与某些C数据类型联系在一起.例如,历史上主.次设备号一直存放在一个16位的短整型中,8位表示主设备号,另外8位表示次设备号.但是,很多较大的系统需要用多于256个值来表示 ...

  2. div 显示滚动条的CSS代码

    div 显示滚动条的CSS代码   div显示上下左右滚动条 <div style="width:260px;height:120px; overflow:scroll; border ...

  3. 在javascript中关于submit和button提交表单区别

    submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上. ...

  4. 利用C语言结构体模拟一个简单的JavaBean

    利用C语言模拟一个Javabean 仅封装了,“无参构造函数”,“带参构造函数”,"toString方法" #include <stdio.h> struct User ...

  5. [置顶] 运算符重载,浅拷贝(logical copy) ,vs, 深拷贝(physical copy)，三大件（bigthree problem）

    一般的我们喜欢这样对对象赋值: Person p1;Person p2=p1; classT object(another_object), or    A a(b); classT object = ...

  6. 解决了jQuery插件未能导入到项目之中

    Loading jQuery plugins from third-party scripts <script src="js/jquery.js" type="t ...

  7. iis7 php urlrewrite 并隐藏index.php

    <rewrite> <rules> <rule name="OrgPage" stopProcessing="true"> ...

  8. CSS3 过渡transition 认识

    其实,我一直觉得自己对新知识是以一种抵触的情绪在学习的.因为我总是习惯于将事情想得很复杂,所以也错过了很多美好的东西. 以前觉得CSS3的知识应该是很难的,很难理解的.但是我发现我觉得知识点很难,是因 ...

  9. getOutputStream() has already been called for this response异常的原因和解决方法

    今天在调试一个小web项目时,验证码不显示了,而且后台报错 getOutputStream() has already been called for this response 经过查找得知: 在t ...

  10. Cordova+angularjs+ionic+vs2015开发（三）

    欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.基础设置 1.修改App名称和程序起始页 打开config.xml配置文件显示如下,在[通用]选 ...