百度地图AP1

最新推荐文章于 2022-05-11 11:25:19 发布

原创最新推荐文章于 2022-05-11 11:25:19 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图AP1

JavaScript 专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何使用百度地图API实现地图展示、位置标记及交互功能。通过C# Web应用实例演示地图初始化、添加标记、控件及事件监听等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

百度地图API的使用方法

百度地图API示例

百度地图API学习总结

<1>

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Peer._128uu.DAL.Model.MemberRegisterInfo>" %>

<!DOCTYPE HTML>
<html>
<head>
    //百度地图的js引入
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script> 
</head>
<body>
    <% using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @id = "form1", @name = "form1" }))
       {%>
    <%: Html.ValidationSummary(true)%>


    <div style="width: 520px; height: 340px; border: 1px solid gray" id="container">
    </div>
    <input id="submit" type="submit" value="提交" class="registerBtn" />


    <% } %>
</body>
</html>
<script type="text/javascript">

    var map = new BMap.Map("container"); //在container容器中创建一个地图,参数container为div的id属性;

    var point = new BMap.Point(112.035925, 22.939858); //定位酒店的坐标（酒店的坐标冲数据库里取）

    var marker = new BMap.Marker(point)// 在当前地址处创建标注

    map.addOverlay(marker); // 将标注添加到地图中

    var label = new BMap.Label("云浮碧桂园凤凰酒店", { offset: new BMap.Size(20, -10) });

    marker.setLabel(label); //给标注添加文字信息




    map.addControl(new BMap.NavigationControl()); //向地图添加一个平移缩放控件
    map.addControl(new BMap.MapTypeControl()); //地图类型控件，默认位于地图右上方
    map.addControl(new BMap.ScaleControl()); //一个比例尺控件
    map.addControl(new BMap.OverviewMapControl()); //一个缩略图控件

    map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
    map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
    map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
    map.enableKeyboard(); //启用键盘上下左右键移动地图

    function showInfo(e) { 
        alert(e.point.lng + ", " + e.point.lat);
    }
    map.addEventListener("click", showInfo); //给地图添加点击事件。

    map.centerAndZoom(point, 15); //将point移到浏览器中心，并且地图大小调整为15;

    //            //创建小狐狸
    //	        var pt = new BMap.Point(116.417, 39.909);
    //	        var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300,157));
    //	        var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
    //	        map.addOverlay(marker2);  




    //定位到当前城市
    //            var city = new BMap.LocalCity();
    //            city.get(getLocalCity);
    //            function getLocalCity(result) { //获取本地城市
    //            var cityName = result.name;
    //            map.centerAndZoom(cityName, 15);

    //            //map.centerAndZoom(point,15);//将point移到浏览器中心，并且地图大小调整为15;
    //            map.addControl(new BMap.NavigationControl());
    //            map.addControl(new BMap.MapTypeControl());
    //            map.addControl(new BMap.ScaleControl());
    //            map.addControl(new BMap.OverviewMapControl());
    //             
    //            }

</script>