当前位置:网站首页 / 百度地图.NET / 正文

aaronyang的百度地图API之LBS云与.NET开发 Javascript API 2.0【基本地图的操作】

时间:2014年04月12日 | 作者 : aaronyang | 分类 : 百度地图.NET | 浏览: 2270次 | 评论 0

为了更简单的演示,我们创建个.NET的ASP.NET MVC4项目


 好了,上面都是后话,POI说白了,就是你的用户的数据,很多数据,不过没关系,因为你的数据如果存在百度的LBS云上,那么大数据你就不用考虑的了

在这之前,我们肯定要知道怎样把用户的数据正确的存到LBS上,在这之前我们先学习下 百度提供的 Javascript API。

这个例子很简单:

1.页面上引入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>

然后创建一个div,设置高宽

<div id="container" style="width:100%;height:500px;"></div>

2.添加js代码

      var map = new BMap.Map("container"); //初始化地图

      这里Map方法,还有个参数,地图的初始化设置,具体的还有哪些参数,后面细讲,这里有个maxZoom,就是地图默认缩放级别

   var mapOption = {
            mapType: BMAP_NORMAL_MAP,
            maxZoom: 18,
            drawMargin: 0,
            enableFulltimeSpotClick: true,
            enableHighResolution: true
        }

    var map = new BMap.Map("container",mapOption); //初始化地图

    第二个,设置初始化点,(经度,纬度)

     map.centerAndZoom(new BMap.Point(117.234963,31.858815), 18);//这里的18会影响mapOption中的maxZoom的设置,会覆盖这个值

     我这里的经度纬度是从LBS云,手动标注添加数据拿到的117.234963,31.858815,后面的18是地图缩放界别,数字越大,地图越详细

      接下来,你就可以运行项目了,效果图如下:(如果你的地图级别比较小,你可以双击地图,然后可以查看更详细的地图)

相关代码:

<h1>第二课 POI数据存储</h1>@section BaiduApi{    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>
    }<br/>
<div id="container" style="width:100%;height:500px;"></div>


<div id="place"></div>

<script type="text/javascript">
    $(function () {        //百度地图基本配置,也可以没有,保持默认        var mapOption = {
            mapType: BMAP_NORMAL_MAP,
            maxZoom: 18,
            drawMargin: 0,
            enableFulltimeSpotClick: true,
            enableHighResolution: true
        }        var map = new BMap.Map("container", mapOption);
        map.centerAndZoom(new BMap.Point(117.234963, 31.858815), 18);

    })</script>

这里的@section,是我在模板页中设置的,模板页代码如下:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>@ViewBag.Title - 我的 ASP.NET MVC 应用程序</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    @RenderSection("BaiduApi", required: false)</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title">@Html.ActionLink("AaronYang的百度地图开发", "Index", "Home")</p>
            </div>
            <div class="float-right">


            </div>
        </div>
    </header>
    <div id="body" style="height:1000px">
        @RenderSection("featured", required: false)        <section class="content-wrapper main-content clear-fix">
            @RenderBody()        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - AaronYang的提升计划</p>
            </div>
        </div>
    </footer>



</body>
</html>

我们继续学习http://www.ayjs.net


我们假如不知道经纬度怎么办?

我们可以这样做,比如说,合肥,当然这样做,百度先要调用它的接口转换成经纬度,然后才能正确显示,所以肯定不如直接输入经纬度的速度快

注意:这里只能输入城市名字,不能具体到省市某街道,不信自己可以试试

map.centerAndZoom("合肥");

我们来查看当前,默认点的经纬度坐标

   
       $(function () {        //百度地图基本配置,也可以没有,保持默认        var mapOption = {
            mapType: BMAP_NORMAL_MAP,
            maxZoom: 18,
            drawMargin: 0,
            enableFulltimeSpotClick: true,
            enableHighResolution: true
        }        var map = new BMap.Map("container", mapOption);        //map.centerAndZoom(new BMap.Point(117.234963, 31.858815), 11);    
        map.addEventListener('load', function () {
            $("#place").text("当前中心点经纬度: "+map.getCenter().lng + ', ' + map.getCenter().lat);
        });
        map.centerAndZoom("合肥");

    })

效果图:

启动鼠标滚轮缩放地图:

map.enableScrollWheelZoom();

添加其余控件

      map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
        map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
        map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
        map.enableScrollWheelZoom();                            //启用滚轮放大缩小
        map.addControl(new BMap.MapTypeControl());          //添加地图类型控件        //map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的

 

这里有个三维 地图,目前只支持 北京,上海,广州,深圳

3D地图DEMO

        var map = new BMap.Map("container", { mapType: BMAP_PERSPECTIVE_MAP });   //设置3D图为底图        var point = new BMap.Point(116.4035, 39.915);
        map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
        map.centerAndZoom(point, 19);
        map.enableScrollWheelZoom(true);                            //启用滚轮放大缩小
        map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
        map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
        map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件

卫星图 mapType:BMAP_HYBRID_MAP

 

 

缩放其他控件的位置控制:

anchor代表什么位置,后面代表控件类型

map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));  //右上角,仅包含平移和缩放按钮map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN}));  //左下角,仅包含平移按钮map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM}));  //右下角,仅包含缩放按钮

 

OK!


 

休息一会----http://www.ayjs.net的博客

 

推荐您阅读更多有关于“百度地图.NET,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

合肥科大智能常年招聘.NET,Java,Web前端,有想找想换工作的私聊我AY唯一QQ:875556003和AY交流

抖音号:wpfui,可以看到我的很多作品效果

AYUI8社区版Github地址:前往获取

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和AY交流

高中学历,2015年1月17日开始,兴趣学习研究WPF,目前工作繁忙,不接任何活

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表