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>

  

时间: 2024-10-12 13:27:06

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

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

原文:PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例 <!--小幅的坐标转换点位程序--> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <?php $jingwei="new BMap.Point($lon

GPS坐标换算为百度坐标

最近在做一个关于手机定位的小应用,需求是这样的,用户通过手机(Wp8)进行二维码扫描操作并且记录用户的当前位置,在PC上可以查看用户所在地图的位置,做法就是在用户扫描条码时,通过手机GPS获取当前在地图上的位置(采用百度静态地图,根据坐标直接生成图片)并将图片保存到数据库,PC端直接从数据库中读取并展示图片.问题是:生成的图片所呈现的位置与实际位置偏差太大.于是我开始踏上了寻找解决办法的道路. 首先我检测我的硬件设备是否定位准确,我用WP8手机内置的地图进行了当前位置定位,结果没有问题,说明我的

异步加载地图

大家好: 今天的另一个加载地图的方法:异步加载地图:顺便学习了一下,js脚本语言!大家分享一下! <span style="font-size:14px;"><!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&q

ArcGis API for JavaScript 开发笔记一 加载地图

1.首先要配置GIS 环境 参考资料:看下这些大神的资料: http://blog.sina.com.cn/s/blog_708bacf90100yddk.html http://blog.csdn.net/wufeishimeng/article/category/522004 也可以查看官方的例子: https://developers.arcgis.com/javascript/jssamples/ 查看GIS 官方API https://developers.arcgis.com/jav

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

原文:解决ArcGIS API for Silverlight 加载地图的内外网访问问题 先上一个类,如下: public class BaseClass { public static string getFullUri(string oldUriString) { string newUriString = oldUriString; //处理相对地址============================================================ if (newUri

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

MapXtreme在asp.net中的使用之加载地图(转) Posted on 2010-05-04 19:44 Happy Coding 阅读(669) 评论(0) 编辑 收藏 1.地图保存在本地的文件系统中,一定要有访问权限(否则无法打开),通过例子可以知道,使用web.config可以配置默认的工作空间. <add key="MapInfo.Engine.Session.Workspace" value="D:\Program Files\MapInfo\MapX

Flixel学习笔记002 加载地图(一)

这篇的参考官方代码示例Cameras,代码在https://github.com/phmongeau/SplitScreen/tree/master/src. 首先用Windows的画图画了几个格,大小是20*20的. 然后参照官方代码示例,写了一段代码: 1 package org 2 { 3 import org.flixel.FlxState; 4 import org.flixel.FlxTilemap; 5 6 /** 7 * ... 8 * @author QuanJP [email

IOS开发----加载地图之后显示为网格,不显示地图

加载地图之后,出现网格,经纬度已经加上了,但并没有地图显示.这时候要设置info.plist文件,右键,open AS------source code 在里面加上如下代码: <key>NSAppTransportSecurity</key><dict><key>NSAllowsArbitraryLoads</key><true/></dict><key>NSLocationWhenInUseUsageDesc

webbrowser加载地图网页出现脚本错误解决

对于这个问题,我整整花了一上午的时间来解决,网上关于此问题的解决几乎找不到,于是我就尽可以能的从网上相关问题的答案中获取些灵感,功夫不负有心人,最终通过这些灵感的积累我终于解决了此问题. 首先让我们先来看看出现的问题,为了看到脚本错误,我先把 webBrowser1.ScriptErrorsSuppressed = true; 隐藏掉,错误如下图所示: 对于此错误,我的第一反应是因jquery.min.js书写不规范导致,但看了一下并未错误,回头想了一下,这种可能性比较小,于是排除了此情况. 我