谷歌地图综合应用两例

最新推荐文章于 2019-07-14 15:18:08 发布
最新推荐文章于 2019-07-14 15:18:08 发布
阅读量504 收藏
点赞数
分类专栏： 谷歌地图 文章标签： function input border button stylesheet class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hflkl1314/article/details/6934656
版权 
<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeFile="googleSure.aspx.cs"
    Inherits="googleSure" %>

<html>
<head>
    <title></title>
    <style>
        body
        {
            font-size: 12px;
            background-color: White;
        }
        *
        {
            font-size: 12px;
        }
    </style>
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></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="putaddress" /><input type="button" οnclick="getLocAddress()"
                        value="搜索" />
                </div>
                <div style="width: 100%; height: 340px; border: 1px solid gray" id="map_canvas">
                </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 geocoder = new google.maps.Geocoder();

        var myOptions = {
            zoom: 5,
            center: new google.maps.LatLng(parentLng, parentLat),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        var image = "";
        var imagegreen = "http://labs.google.com/ridefinder/images/mm_20_green.png";

        var myLatLng = new google.maps.LatLng(parentLng, parentLat);
        var beachMarker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            draggable: true
        });

        //移动标记
        google.maps.event.addListener(beachMarker,
                'dragend',
                function (result) {
                    var _lat = result.latLng.lat();
                    var _lng = result.latLng.lng();
                    getAreaName(_lat, _lng);
                });


        if (parentaddress == "")
            getAreaName(parentLng, parentLat)
        else {
            $("#address").val(parentaddress);
            infowindow = new google.maps.InfoWindow();
            infowindow.setContent("<b>当前位置：</b><br>" + parentaddress);
            infowindow.setPosition(myLatLng);
            infowindow.open(map);
        }

        var Ginfowindow = new google.maps.InfoWindow();
        //地址反解析
        function getAreaName(lat, lng) {
            $("#lat").val(lng);
            $("#lng").val(lat);
            var resultstr = "";
            var latlng = new google.maps.LatLng(lat, lng);
            geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0].formatted_address != "") {
                        var _address = results[0].formatted_address;
                        $("#address").val(_address);
                        infowindow.close();
                        infowindow = new google.maps.InfoWindow();
                        infowindow.setContent("<b>当前位置：</b><br>" + _address);
                        infowindow.setPosition(latlng);
                        infowindow.open(map);
                        Ginfowindow = infowindow;
                    }
                }
            });
        }


        //地址解析
        // 将地址解析结果显示在地图上,并调整地图视野
        function getLocAddress() {            
            var _address = $('#putaddress').val();
            if (_address == "") {
                alert("请输入地址");
                return;
            }
            if (geocoder) {
                geocoder.geocode({ 'address': _address }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                       
                        getAreaName(results[0].geometry.location.lat(), results[0].geometry.location.lng());
                    }
                    else {
                        alert("地位失败，建议您先大范围定位，然后具体定位");
                    }
                });
            }

        }
    </script>
    </form>
</body>
</html>





<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="google.aspx.cs" Inherits="google" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></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="map_canvas">
                </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, 'googleSure.aspx', 0)"  id="Submit1"  type="button" value="我还可以再精确" />
                </div>
                <input type="hidden" id="HasUpdate" value="1" />
            </td>
        </tr>
    </table>
     

    <script type="text/javascript">
         function initialize() {
            if ($("#HasUpdate").val() == 0)
                return;

            var lattxt = $("#lat").val();
            var lngtxt = $("#lng").val();
            var Prompt = $("#address").html();

            var myOptions = {
                zoom: 5,
                center: new google.maps.LatLng(lngtxt, lattxt),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            var myLatLng = new google.maps.LatLng(lngtxt, lattxt);
            var beachMarker = new google.maps.Marker({
                position: myLatLng,
                map: map
            });
            infowindow = new google.maps.InfoWindow();
            infowindow.setContent("<b>当前位置：</b><br>" + Prompt);
            infowindow.setPosition(myLatLng);
            infowindow.open(map);

            $("#HasUpdate").val("0");
        }
        window.onload = initialize;
        setInterval(initialize,1000);
         
</script>
 
</asp:Content>


hflkl1314
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
shp地图如何导入奥维地图手机_奥维地图如何导入路线数据？
weixin_39690097的博客
12-19 4707
【www.520z-2.com - 话题作文】篇一:《手机奥维互动地图使用经验以及操作指南》手机奥维互动地图使用经验以及操作指南(支持IOS、Android、WP8)作者：[路游](@[路游]，若介意侵权请联系，告知后立即删除)来源：新丝路链接：从今年3月开始接受小羊军团16期领队培训班培训至今，收获颇多。特别是听了獬豸老师讲的OruxMaps户外全功能地图软件使用，发现手机GPS地图的应用真可谓...
谷歌地图 离线api---最新
04-26
谷歌地图 离线api
地图之美（地图制图）
David_jiang
07-14 1万+
介绍地图的历史和制作方法
建立数据地图，盘活数据资产！
热门推荐
湮顾千古的博客
01-05 2万+
数据地图的潜在价值 1.什么是数据地图 数据地图是一种图形化的数据资产管理工具，它提供了多层次的图形化展现，并具备各种力度的控制能力，满足业务使用、数据管理、开发运维不同应用场景的图形查询和辅助分析需求。 2.案例分析 以百度地图为例，通过交互式界面，我们可以在一个陌生的城市，方便地搜索我们想要的信息，比如：附件的酒店、美食、景点、游乐园、超市、的士等一系列服务信息，并且直接可以在搜索到的...
地图瓦片相关学习总结
bcbobo21cn的专栏
06-13 7670
瓦片地图 瓦片地图金字塔模型是一种多分辨率层次模型，从瓦片金字塔的底层到顶层，分辨率越来越低，但表示 的地理范围不变。 中文名 瓦片地图 模    型层次模型 软    件ArcGIS软件 发    展 瓦片技术 目录 1 原理 2 发展 原理 首先确定地图服务平台所要提供的缩放级别的数量N，把缩放级别最低、地图比例尺最大的地图图片作为 金字塔的底层，即第
GoogleMap地图控件应用源码.zip
06-18
【GoogleMap地图控件应用源码】是一个包含Google Maps API集成到应用程序中的源代码资源。这个压缩包很可能是为了帮助开发者理解和实现Google Maps在各种平台上的功能，如Android、iOS或者Web应用。通过分析和学习...
2023奥维地图谷歌图源添加方法
03-04
奥维地图是一款功能强大的地图应用，它支持多种地图源，包括卫星图、地形图等，让用户可以根据需求选择最适合的地图视角。谷歌地图则是全球知名的在线地图服务，以其高清、实时更新的特点受到广泛使用。本教程将详细...
google-map.zip_谷歌地图
09-21
在安卓应用开发中，谷歌地图（Google Maps）是一个不可或缺的工具，它允许开发者将地图功能集成到自己的应用程序中，提供导航、定位、地理编码等多种服务。这个“google-map.zip”压缩包显然包含了用于演示如何在...
google-map.rar_谷歌地图
09-23
谷歌地图API是Google提供的一项强大的服务，允许开发者在自己的网页或应用中集成地图功能，进行各种自定义操作，如添加标记、绘制路径、设置信息窗口等。本教程将深入讲解如何使用谷歌地图API来实现地图标注。 首先...
基于Springboot和Vue的图书借还管理系统源码 图书借还管理系统代码（高分毕设）
07-28
图书借还管理系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
C语言内存管理：静态与动态分配的较量
07-28
C语言是一种通用的编程语言，由丹尼斯·里奇（Dennis Ritchie）在20世纪70年代早期于美国电话电报公司（AT&T）的贝尔实验室开发。C语言以其高效性、灵活性和可移植性而闻名，它是一种过程式编程语言，提供了对底层硬件的直接访问能力。 C语言的特点包括： 1. **简洁高效**：C语言的语法简洁，执行效率高，适合编写系统软件。 2. **接近硬件**：C语言提供了对内存地址和位操作的直接控制，使其非常适合硬件级编程。 3. **可移植性**：C语言编写的程序可以在不同的操作系统和硬件平台上编译和运行，具有很好的可移植性。 4. **丰富的库支持**：C语言拥有大量的标准库，如标准输入输出库（stdio.h）、数学库（math.h）等。 5. **结构化编程**：C语言支持结构化编程，允许使用循环、条件判断和函数等控制结构。 6. **指针**：C语言的指针功能强大，可以操作内存地址，实现复杂的数据结构和算法。 7. **编译型语言**：C语言是一种编译型语言，源代码需要通过编译器转换成机器码才能运行。 C语言广泛应用于操作系统（如Unix和Linux）、嵌入式系统、高性能
通讯协议规范-命令包格式
07-28
提供一份通讯协议规范，包含命令包、格式等，在上下位机调试的时候可参考该文档，制定对应的通讯协议。
四足宠物机器狗动态步行规划与仿真.pdf
最新发布
07-28
四足宠物机器狗动态步行规划与仿真
JSP、Servlet、HTML、CSS、JS和JQuery开发的Java题库管理系统可执行内含文档代码.zip
07-28
JSP、Servlet、HTML、CSS、JS和JQuery开发的Java题库管理系统可执行内含文档代码.zip
微信小程序-小京东源代码完美运行版.7z
07-28
经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。
9查找技术综合应用.doc
07-28
9查找技术综合应用.doc
微信小程序-小程序商城源代码完美运行版.7z
07-28
经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。
谷歌地图API深度解析与应用实践
"本文主要介绍了Google地图API的理解和应用，帮助开发者更好地掌握地图开发技术，提升编程技能。文章提到了地图API的关键组成部分，包括地图操控接口、地理数据服务接口，以及它们在各种应用场景中的作用。" Google...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值