当前位置:首页 > Windows程序 > 正文

C#的百度地图开发(四)前端显示与定位

2021-05-26 Windows程序

有了这些定位信息,那要如何在前端的页面上显示出来呢?这需要用到百度地图的JavaScript的API。下面是示例代码。

前端代码

[html] view plaincopy

技术分享

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ViewMap.aspx.cs" Inherits="TEST.ViewMap" %>  

  

<!DOCTYPE html>  

  

  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head id="Head1" runat="server">  

    <title>地图</title>  

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

    <script src="/js/map.js"></script>  

    <script src="/js/jquery.js"></script>  

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XXXXXXXXXXXX"></script>  

</head>  

<body>  

    <div id="normal_map"></div>  

    <input type="hidden" runat="server" id="HiddenCoord" />  

    <input type="hidden" runat="server" id="HiddenAddress" />  

</body>  

</html>  

<script type="text/javascript">  

    $(document).ready(function () {  

        var w = $(window).width();  

        var h = $(document).height();  

        var coord = $(‘#<%=HiddenCoord.ClientID%>‘).val().split(‘,‘);  

        var lat = coord[0];  

        var lng = coord[1];  

        var address = $(‘#<%=HiddenAddress.ClientID%>‘).val();  

        $("#normal_map").css({  

            "width": w + "px",  

            ‘height‘: h + ‘px‘  

        });  

        MapApi.LoadLocationMap(lat, lng, ‘normal_map‘, "<p>" + address + "</p>");  

  

    });  

</script>  


注:

(1).script中后面的ak是申请的key,与前面文章中所说的key一致。

(2).引用了jquery的库。

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/71282.html