zoukankan      html  css  js  c++  java
  • GPS坐标转百度地图并且加载地图示例.支持微信端访问

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Wx_VehicleLocation.aspx.cs" Inherits="DTMS.WeiXin.wxmgr.govmgr.Wx_VehicleLocation" %>
     
    <!DOCTYPE html>
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- #手机浏览器兼容性设置 -->
        <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
        <meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
        <meta content="no-cache" http-equiv="pragma">
        <meta content="0" http-equiv="expires">
        <meta content="telephone=no" name="format-detection" />
     
        <meta content="width=1, initial-scale=1" name="viewport">
        <title>车辆位置</title>
        <link href="../../skin/weui/dist/style/weui.min.css" rel="stylesheet" />
        <script src="../../Scripts/jquery-1.9.1.min.js"></script>
        <style type="text/css">
            #allmap {
                 50%;
                height: 50%;
                overflow: hidden;
                margin: 0;
                font-family: "微软雅黑";
            }
        </style>
    </head>
    <body>
        <div class="weui_search_bar" id="search_bar">
            <form class="weui_search_outer" method="post">
                <div class="weui_search_inner">
                    <i class="weui_icon_search"></i>
                    <input type="search" class="weui_search_input" id="search_input" placeholder="输入车牌号码中间四位数字" required />
                    <a href="javascript:" class="weui_icon_clear" id="search_clear"></a>
                </div>
                <label for="search_input" class="weui_search_text" id="search_text">
                    <i class="weui_icon_search"></i>
                    <span>车辆检索</span>
                </label>
     
            </form>
            <a href="javascript:" class="weui_search_cancel" id="search_cancel">取消</a>
        </div>
     
        <div id="vehicleInfo" class="weui_cells weui_cells_access search_show">
           
        </div>
     
        <div id="content" class="content">
     
            <div style="height: 500px; border: 0px solid gray" id="container"></div>
     
     
     
        </div>
     
     
    </body>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=vnUtQo9ngQW4CXlKwnBp2oGc"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
    <%--百度地图坐标转换js--%>
     
    <script type="text/javascript">
     
      
                          
                        
     
       
        //根据经纬度获取具体的地名
        function getAddressByLn() {
            var address = "";
            var map = new BMap.Map("container");
            var gpsPoint = new BMap.Point(ln, la);
            alert("" + ln + "la" + la);
            map.centerAndZoom(gpsPoint, 15);
            map.enableScrollWheelZoom();    //启用滚轮放大缩小,默认禁用
            map.enableContinuousZoom();    //启用地图惯性拖拽,默认禁用
            //添加鼠标滚动缩放
            map.enableScrollWheelZoom();
            //添加缩放平移控件
            map.addControl(new BMap.NavigationControl());
        
     
            setTimeout(function () {
                BMap.Convertor.translate(gpsPoint, 0, translateCallback);     //真实经纬度转成百度坐标
            }, 1000);
     
     
            //坐标转换完之后的回调函数
            translateCallback = function (bdpoint) {
            
     
                var gc = new BMap.Geocoder();
     
                var hh = ("ln" + ln + "la" + la);
                gc.getLocation(bdpoint, function (rs) {
                    var addComp = rs.addressComponents;
     
                    address = ("" + addComp.district + addComp.street + addComp.streetNumber);
                    $("#vehicleLocation").append("<div css='weui_cell' id='adre'><div class='weui_cell_bd weui_cell_primary'>最新位置:" + address + hh + "附近</div</div>");
                   
                    //设置标注的图标
                    var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
                        offset: new BMap.Size(10, 25), // 指定定位位置  
                        imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移  
                    });
                    var marker = new BMap.Marker(bdpoint, { icon: myIcon });
                    //把标注添加到地图上
                    map.addOverlay(marker);
                    alert("转化为百度坐标为:" + bdpoint.lng + "," + bdpoint.lat);
     
     
     
                });
            }
     
     
     
     
        }
     
     
     
     
     
     
    </script>
     
    </html>
    

      

  • 相关阅读:
    洛谷P3959 宝藏(模拟退火乱搞)
    POJA Star not a Tree?(模拟退火)
    HDU 2899Strange fuction(模拟退火)
    洛谷P2062 分队问题(dp)
    主定理与时间复杂度
    android工程混淆和反编译
    查看linux内存、cpu
    Android sqlite数据库存取图片信息
    深入浅出JSONP--解决ajax跨域问题
    分析WordPress主题结构是如何架构的?
  • 原文地址:https://www.cnblogs.com/benbenfishfish/p/5316312.html
Copyright © 2011-2022 走看看