• 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>
    

      

  • 相关阅读:
    UVA 10617 Again Palindrome
    UVA 10154 Weights and Measures
    UVA 10201 Adventures in Moving Part IV
    UVA 10313 Pay the Price
    UVA 10271 Chopsticks
    Restore DB後設置指引 for maximo
    每行SQL語句加go換行
    种服务器角色所拥有的权限
    Framework X support IPV6?
    模擬DeadLock
  • 原文地址:https://www.cnblogs.com/benbenfishfish/p/5316312.html
Copyright © 2020-2023  润新知