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>