百度地图使用-简单使用

1、获取密钥，JavaScript API v1.4及以前版本无须申请密钥（ak），自v1.5版本开始需要先申请密钥（ak），才可使用API接口。

格式如：http://api.map.baidu.com/api?v=1.5&ak=您的密钥

2、简单使用DEMO

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="<%= ResolveUrl("resource/jquery-1.7.min.js")%>" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=28acbd5650cf12af195e1ecaaf83472b"></script>
        <style type="text/css">
        #ditu {
             100%;
            height: 700px;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
         <div id="ditu">
        </div>
    </form>
    <script>
        $(function() {
                //创建地图
                var map = new BMap.Map("ditu");
                window.map = map;

                //地图设置
                map.enableDragging();            //启用地图拖拽事件，默认启用
                map.enableScrollWheelZoom();    //启用地图滚轮放大缩小
                map.enableDoubleClickZoom();    //启用鼠标双击放大，默认启用
                map.enableKeyboard();            //启用键盘上下左右键移动地图
                map.enableContinuousZoom();        //启用连续缩放效果
                
                //添加地图控件
                map.addControl(new BMap.NavigationControl());                    //添加默认缩放平移控件
                map.addControl(new BMap.ScaleControl());                        //添加默认比例尺控件
                map.addControl(new BMap.OverviewMapControl({ isOpen: 1 }));        //添加默认缩略地图控件 
                map.addControl(new BMap.MapTypeControl());                        //添加控件展示的类型 包括 地图 卫星 三维
            
                map.centerAndZoom('南京', 13); // 初始化地图,设置中心点坐标和地图级别。
        });
    </script>
    </body>
</html>

View Code

3、添加简单的覆盖物、鼠标事件DEMO

    <script>
        $(function () {
            //创建地图
            var map = new BMap.Map("ditu");
            window.map = map;

            //地图设置
            map.enableDragging();            //启用地图拖拽事件，默认启用
            map.enableScrollWheelZoom();    //启用地图滚轮放大缩小
            map.enableDoubleClickZoom();    //启用鼠标双击放大，默认启用
            map.enableKeyboard();            //启用键盘上下左右键移动地图
            map.enableContinuousZoom();        //启用连续缩放效果

            //添加地图控件
            map.addControl(new BMap.NavigationControl());                    //添加默认缩放平移控件
            map.addControl(new BMap.ScaleControl());                        //添加默认比例尺控件
            map.addControl(new BMap.OverviewMapControl({ isOpen: 1 }));        //添加默认缩略地图控件 
            map.addControl(new BMap.MapTypeControl());                        //添加控件展示的类型 包括 地图 卫星 三维

            map.centerAndZoom('南京', 13); // 初始化地图,设置中心点坐标和地图级别。
            
            //添加覆盖物
            addPoint();
        });

        function addPoint() {
            var point = new BMap.Point(118.757917, 32.043227);
            map.centerAndZoom(point, 13);
            
            var myIcon = new BMap.Icon("resource/image/employee.gif", new BMap.Size(10, 18));
            //创建标注图标  
            var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注  
            map.addOverlay(marker); // 将标注添加到地图中
            
            //添加鼠标事件
            marker.addEventListener("mouseover", function () {
                this.openInfoWindow(new BMap.InfoWindow(
                    ""
                    , { title: '<a href=" " target="_blank">' + "Hellow" + '</a>' }
                ));
            });
        }

        
    </script>

View Code

4、GPS经纬度转百度地图经纬度

直接将经纬度在百度地图显示发现在一定的的偏移，其实我们获取的经纬度在地图上显示是需要做一个转换。

添加引用 <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js "></script>

    <script>
        $(function () {
            //创建地图
            var map = new BMap.Map("ditu");
            window.map = map;

            //地图设置
            map.enableDragging();            //启用地图拖拽事件，默认启用
            map.enableScrollWheelZoom();    //启用地图滚轮放大缩小
            map.enableDoubleClickZoom();    //启用鼠标双击放大，默认启用
            map.enableKeyboard();            //启用键盘上下左右键移动地图
            map.enableContinuousZoom();        //启用连续缩放效果

            //添加地图控件
            map.addControl(new BMap.NavigationControl());                    //添加默认缩放平移控件
            map.addControl(new BMap.ScaleControl());                        //添加默认比例尺控件
            map.addControl(new BMap.OverviewMapControl({ isOpen: 1 }));        //添加默认缩略地图控件 
            map.addControl(new BMap.MapTypeControl());                        //添加控件展示的类型 包括 地图 卫星 三维

            map.centerAndZoom('南京', 13); // 初始化地图,设置中心点坐标和地图级别。

            //添加覆盖物
            addPoint();
        });

        function addPoint() {
            var point = new BMap.Point(118.757917, 32.043227);

            var myIcon = new BMap.Icon("resource/image/employee.gif", new BMap.Size(10, 18));
            //创建标注图标  
            var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注  
            map.addOverlay(marker); // 将标注添加到地图中

            //添加鼠标事件
            marker.addEventListener("mouseover", function () {
                this.openInfoWindow(new BMap.InfoWindow(
                    ""
                    , { title: '<a href=" " target="_blank">' + "我是GPS坐标" + '</a>' }
                ));
            });
            

            BMap.Convertor.translate(point, 0, function (currentPoint) {
                
                var marker = new BMap.Marker(currentPoint, { icon: myIcon });
                map.addOverlay(marker);
                //添加鼠标事件
                marker.addEventListener("mouseover", function () {
                    this.openInfoWindow(new BMap.InfoWindow(
                        ""
                        , { title: '<a href=" " target="_blank">' + "我是百度地图坐标" + '</a>' }
                    ));
                });
            });
        }
        
        
    </script>

View Code