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

2021-10-18 08:07:59

为了更简单的演示，我们创建个.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，设置高宽

2.添加js代码

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

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

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

   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://aaronyang.cnblogs.com

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

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

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

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://aaronyang.cnblogs.com的博客

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

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

码农公寓

相关文章