GPS坐标转百度地图并且加载地图示例.支持微信端访问

Posted 2020-06-28 笨笨鱼~

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 {
            width: 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>

以上是关于GPS坐标转百度地图并且加载地图示例.支持微信端访问的主要内容，如果未能解决你的问题，请参考以下文章

delphi 调用百度地图WEBSERVICE转换GPS坐标转

微信小程序地图定位GPS转腾讯地图的坐标系

地图中的坐标系（转）

WGS84(GPS)火星坐标系（GCJ02）百度地图（BD09）坐标系转换案例教程（附转换工具下载）