百度地图应用实例两则

最新推荐文章于 2024-04-16 16:49:33 发布
最新推荐文章于 2024-04-16 16:49:33 发布
阅读量641 收藏
点赞数
分类专栏： 百度地图 文章标签： 百度 function input border button class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hflkl1314/article/details/6934674
版权 
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="baidu.aspx.cs" Inherits="baidu" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="68%">
                <div style="width: 100%; height: 340px; border: 1px solid gray" id="container">
                </div>
            </td>
            <td width="30%" valign="top" style="padding-left: 10px; line-height: 30px;">
                <b style="color: Red">我现处位置：</b><br />
                <input type="hidden" id="lat" value="120.3">
                <input type="hidden" id="lng" value="30.3">
                名称：<span id="thename">阿里巴巴</span><br />
                地址：<span id="address">浙江省杭州市</span><br />
                楼层：<span id="layer">12</span> 楼<br />
                场所类型:<span id="TypeName1">住宿</span> - <span id="TypeName2">写字楼</span>
                <input type="hidden" id="BigTypeId" value="16" />
                <input type="hidden" id="SmallTypeId" value="1604" />
                <div>
                    <input οnclick="DoLoadIframeInPage(800, 500, 'baiduSure.aspx', 0)" id="Submit1" type="button"
                        value="我还可以再精确" />
                </div>
                <input type="hidden" id="HasUpdate" value="1" />
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        var setmapload = function () {
            if ($("#HasUpdate").val() == "0")
                return;
            var map = new BMap.Map("container");
            var lattxt = $("#lat").val();
            var lngtxt = $("#lng").val();
            var Prompt = $("#address").html();
            var point = new BMap.Point(lattxt, lngtxt);
            map.centerAndZoom(point, 12);
            var opts = {
                width: 250,     // 信息窗口宽度
                height: 30,     // 信息窗口高度
                title: "当前位置："  // 信息窗口标题
            }
            var marker = new BMap.Marker(point);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            marker.setPosition(point);

            var infoWindow = new BMap.InfoWindow(Prompt, opts);  // 创建信息窗口对象
            map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
            $("#HasUpdate").val("0");
        }
        window.onload = setmapload;
        setInterval(setmapload, 1000);
    </script>
</asp:Content>







<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeFile="baiduSure.aspx.cs"
    Inherits="baiduSure" %>

<html>
<head>
    <title></title>
    <style>
        body
        {
            font-size: 12px;
            background-color: White;
        }
        *
        {
            font-size: 12px;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    <script src="Scripts/IFrameWindow.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
    <form runat="server" id="form1">
    <div style="height: 25; line-height: 25px; text-align: right; padding-right: 15px;
        background-color: #eee; margin-bottom: 30px;">
        <input id="Button1" οnclick="CloseMe(0)" style="cursor: pointer; border: 0px; color: Red;
            text-decoration: underline" type="button" value="关闭地图" />
    </div>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="60%">
                <div>
                    输入地址：<input type="text" size="10" id="putcity" />
                    <input type="text" size="10" id="putaddress" /><input type="button" οnclick="getLocAddress($('#putaddress').val(),$('#putcity').val())"
                        value="搜索" />
                </div>
                <div style="width: 100%; height: 340px; border: 1px solid gray" id="container">
                </div>
            </td>
            <td valign="top" style="padding-left: 10px;">
                <b style="color: Red">我现处位置：</b><br />
                <input type="hidden" id="lat">
                <input type="hidden" id="lng">
                <script type="text/javascript">
                    //获取父窗体信息
                    var parentLat = $('#lat', parent.document).val();
                    var parentLng = $('#lng', parent.document).val();

                    if (parentLat == "" || parentLng == "") {
                        parentLat = "120.2";
                        parentLng = "30.3";
                    }
                    var parentname = $('#thename', parent.document).html();
                    var parentaddress = $('#address', parent.document).html();
                    var parentLayer = $('#layer', parent.document).html();
                    var BigType = $('#BigTypeId', parent.document).val();
                    var SmallType = $('#SmallTypeId', parent.document).val();
                    var isstart = true;

                    //数据提交
                    function onsumbit() {
                        if ($("#name").val() == "") {
                            alert("请填写名称");
                            return false;
                        }
                        if ($("#address").val() == "") {
                            alert("请填写地址信息，或者重新地位您所在的地址");
                            return false;
                        }

                        //设置父窗体数据
                        $('#lat', parent.document).val($("#lat").val());
                        $('#lng', parent.document).val($("#lng").val());
                        $('#thename', parent.document).html($("#name").val());
                        $('#address', parent.document).html($("#address").val());
                        $('#layer', parent.document).html($("#layer").val());
                        $('#TypeName1', parent.document).html($("#DDL_BigType").find("option:selected").text());
                        $('#TypeName2', parent.document).html($("#DDL_Smalltype").find("option:selected").text());

                        $('#BigTypeId', parent.document).val($("#DDL_BigType").val());
                        $('#SmallTypeId', parent.document).val($("#DDL_Smalltype").val());
                        $('#HasUpdate', parent.document).val("1");
                        
                        CloseMe(0);
                    }
                    function setBtShow(btId) {
                        document.getElementById(btId).style.display = "";
                    }
                    function setBtHidden(btId) {
                        document.getElementById(btId).style.display = "none";
                    }
                    function setInputNull(inputId) {
                        document.getElementById(inputId).value = "";
                    }

                    GetSmallType = function (bbid) {
                        $.get("./GetPlaceCategory.aspx", { bid: bbid }, function (data, textStatus) {
                            //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
                            this; // 在这里this指向的是Ajax请求的选项配置信息，请参考下图
                            formatString(data);
                        });

                    }
                    function formatString(data) {
                        var typeList = data.split('&');
                        $("#Select2").find("option").remove();
                        var options = "<option value=''>--二级场所信息--</option>";
                        for (i = 0; i < typeList.length; i++) {

                            if (typeList[i] != "")
                                options += "<option value='" + typeList[i].split('|')[0] + "'>" + typeList[i].split('|')[1] + "</option>";
                        }
                        $('#DDL_Smalltype').html(options);
                        if (isstart) {
                            $('#DDL_Smalltype').val(SmallType);
                            isstart = false;
                        }
                    }

                </script>
                <style>
                    .outdiv
                    {
                        border: 1px #ccc solid;
                        height: 20px;
                        margin-bottom: 5px;
                    }
                    .put
                    {
                        border: 0px;
                        height: 18px;
                    }
                    .btDelete
                    {
                        height: 18px;
                        cursor: pointer;
                        border: 0px;
                        background-color: White;
                        width: 18px;
                        font-size:18px;
                        overflow:hidden;
                        line-height:18px;
                    }
                    .tdheight td,select{ padding-bottom:5px;}
                </style>
                <table border="0" class="tdheight" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            名称：
                        </td>
                        <td>
                            <div style="width: 155px;" class="outdiv" οnmοusemοve="setBtShow('bt_name')" οnmοuseοut="setBtHidden('bt_name')">
                                <input class="put" type="text" id="name"><input class="btDelete" οnclick="setInputNull('name')"
                                    title="点击清空" style="display: none" id="bt_name" type="button" value="×" />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            地址：
                        </td>
                        <td>
                            <div class="outdiv" style="width: 205px;" οnmοusemοve="setBtShow('bt_address')" οnmοuseοut="setBtHidden('bt_address')">
                                <input type="text" class="put" id="address" size="30"><input class="btDelete" οnclick="setInputNull('address')"
                                    title="点击清空" style="display: none" id="bt_address" type="button" value="×" />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            楼层：
                        </td>
                        <td>
                            <input type="text" size="5" maxlength="5" id="layer" />
                            楼
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                            场所类型:
                        </td>
                        <td>
                            <asp:DropDownList ID="DDL_BigType" οnchange="GetSmallType($('#DDL_BigType').val())"
                                runat="server">
                                <asp:ListItem Text="--一级场所信息--" Value=""></asp:ListItem>
                            </asp:DropDownList>
                            <br /><br />
                            <select id="DDL_Smalltype">
                                <option>--二级场所信息--</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                            <input id="Submit1" οnclick="return onsumbit()" type="button" value="提交" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        
        if (BigType != "") {
            $("#DDL_BigType").val(BigType);
            GetSmallType(BigType);           
            
        }


        $("#lat").val(parentLat);
        $("#lng").val(parentLng);
        $("#name").val(parentname);
        $("#layer").val(parentLayer);



        var map = new BMap.Map("container");            // 创建Map实例
        var point = new BMap.Point(parentLat, parentLng);    // 创建点坐标
        map.centerAndZoom(point, 12);                     // 初始化地图,设置中心点坐标和地图级别。

        map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
        map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
        map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件

        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        marker.enableDragging(true); // 设置标注可拖拽


        var opts = {
            width: 250,     // 信息窗口宽度
            height: 50,     // 信息窗口高度
            title: "<b>地址信息：</b>"  // 信息窗口标题
        }

        var gc = new BMap.Geocoder();

        if (parentaddress == "")
            getlocInfo(point);
        else {
            var infoWindow = new BMap.InfoWindow(parentaddress, opts);  // 创建信息窗口对象
            marker.openInfoWindow(infoWindow);
            $("#address").val(parentaddress);
        }

        marker.addEventListener("dragend", function (e) {
            var pt = e.point;
            getlocInfo(pt);
        });

        //地址反解析
        function getlocInfo(pointInfo) {
            $("#lat").val(pointInfo.lat);
            $("#lng").val(pointInfo.lng);

            gc.getLocation(pointInfo, function (rs) {
                var addComp = rs.addressComponents;
                var _address = "";
                if (addComp.province != "") {
                    _address = addComp.province;
                    if (addComp.city != "") {
                        _address += "," + addComp.city;
                        if (addComp.district != "") {
                            _address += "," + addComp.district;
                            if (addComp.street != "") {
                                _address += "," + addComp.street;
                                if (addComp.streetNumber != "") {
                                    _address += "," + addComp.streetNumber;
                                }
                            }
                        }
                    }
                }
                $("#address").val(_address);
                var infoWindow = new BMap.InfoWindow(_address, opts);  // 创建信息窗口对象
                marker.openInfoWindow(infoWindow);
            });
        }

        //地址解析
        // 将地址解析结果显示在地图上,并调整地图视野
        function getLocAddress(address, city) {
            var myGeo = new BMap.Geocoder();
            myGeo.getPoint(address, function (point) {
                if (point) {
                    marker.setPosition(point)
                    map.setCenter(point)
                    getlocInfo(point);
                }
            }, city);
        }
</script>
    </form>
</body>
</html>


hflkl1314
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目中使用百度地图的方法
08-27
主要介绍了在vue项目中使用百度地图的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴借鉴价值,需要的朋友可以参考下
百度地图在项目应用示例
qq_27512271的博客
06-29 3150
百度地图应用示例 概述：       百度地图是为用户提供包括智能路线规划、智能导航、实时路况等出行相关服务的平台。因此百度地图在我们的生活当中应用极为广泛，所以下面我就来为大家分享一下在项目中怎么实现百度地图。 1、申请百度AK:       要想在项目中应用百度地图，首先我们...
百度地图API的使用(附案例)
xiaolu567的博客
10-22 5286
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。我们直接把文档内的代码cv过来,加上秘钥就可以直接使用地图了。原理跟地图路线规划一样,添加两个标注点,根据标注点来规划路线。那么我们就可以创建2个标注点来设计步行路线。我们可以拖动标注点来获取到标注点的坐标。我们向地图添加标注点和信息窗口。选择浏览器端,白名单输入*我们已经学会使用标注点了。
一个百度地图API应用实例
gznc_pcc的博客
05-03 4676
实现的功能有：导航、行政规划、定位、卫星/三维地图、地图标记、计算到达时间等等。 &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt; &lt;meta name="viewport" content="initia
百度地图的使用方法，及vue中调用
weixin_56511814的博客
04-01 2703
1.百度地图的注册 使用 密钥 点开下面连接进行注册然后 登录百度账号https://lbsyun.baidu.com/?qq-pf-to=pcqq.group点开控制台 进入我的应用 创建后会有个密钥（AK）这个引入地图是要用 3.页面引入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script> 4....
Angular和百度地图的结合实例代码
10-21
最近在angular的项目，但是我用直接引用百度地图的方法引进js,写html,js代码，发现报错，接下来通过本文给大家介绍angular和百度地图的结合,需要的朋友可以参考下
MFC使用WebBrowser控件调用百度地图API案例
04-26
案例文档里面有使用教程——《基于MFC与第三方类CWebPage的百度地图API开发范例.pdf》，可依照教程步骤进行操作。源码在“GeoDemo”文件夹里面。
调用百度地图的案例
01-17
一个html网页用于调用百度地图，浏览器可以直接打开看到效果
c# 调用百度地图API 代码示例
04-23
将百度地图嵌入c# cs窗体中，cs...查了很多资料，参考网上众多朋友的代码及百度地图API demo,这个例子中的js代码不用key，方便很多，使用的是v1.4版，少了很多限制，使用.net4.5开发的，可以将c#代码转为低版本也行的。
百度地图应用实例三
10-14
百度地图地位，路线搜索，位置搜索，定位精度比Google地图准确额！
百度手机地图 实例集合
10-23
百度手机地图 实例集合
百度手机地图实例大全
07-30
百度手机地图实例大全 路线查询 公交查询 开车查询 步行查询 关键词搜寻 本地查询 周边查询 地图定位 定位经纬度 公交路线查询 地方服务类查询
Android 调用百度地图API示例
08-31
在Android开发中有一个非常重要的应用就是实时定位，通过手机在手机地图上进行实时定位，定位当前手机的位置，这篇文章主要介绍了Android 调用百度地图API示例，有兴趣的可以了解一下。
百度地图应用范例
01-02
本示例提供给Android初学者一个了解并初步运用百度地图提供的接口来开发设计地图的APP的方法，简单易懂可以借鉴一下
安卓系统百度地图实例
04-17
安卓百度地图定位显示实例，需申请百度api接口及密钥。
AI大模型日报#0416：李飞飞《2024年人工智能指数报告》、Sora加入Adobe、李彦宏聊百度大模型之路
常政·视角
04-16 998
AI大模型日报，爬虫+LLM自动生成，一文览尽每日AI大模型要点资讯！
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告.docx
最新发布
04-18
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告
网站界面设计mortal0418代码
04-18
网站界面设计mortal0418代码
vue2使用百度地图案例
05-26
以下是一个简单的 Vue2 百度地图案例： 1. 在 index.html 中引入百度地图 API： ```html <script src="http://api.map.baidu.com/api?v=2.0&ak=your_app_key"></script> ``` 2. 在组件中引入百度地图： ```vue ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值