您的位置: 首页  >  文章  >  MVC项目中使用百度地图

MVC项目中使用百度地图

分类: 文章 • 2024-09-07 13:55:28

  已经很久没更新博客了，因为最近一直在学习前端的知识，没那么多时间，写博客或者写文章不但没有钱，写得好还好说，如果写得不好，一些吃瓜群众，不仅要喷你，搞不好还要人身攻击就不好了。所以写博客的人，脸皮得厚，像我这样，任凭骂我千百遍，我依旧坚持写，也不怕侮辱了谁的眼睛，哈哈~我发现有些做技术比较厉害的人，多少都有些脾气，你永远不知道他什么时候突然就消失在园子里了......

   在使用百度地图之前，我们要先去百度开放平台申请ak。地址：http://lbsyun.baidu.com/

  MVC项目中使用百度地图

 填写开发者认证信息，你可以以个人名义，也可以以公司名义申请一个秘钥，企业开发者认证功能更加强大。在前期做技术开发，我们通常以个人名义申请一个秘钥，等以后项目要上线的时候切换到企业的秘钥就可以了。在进行认证的时候，可能会遇到一些问题，比如说：手机号已经注册，这表示，你曾经申请过，你可以找出你曾经申请时使用的百度账号，用那个账号进行登录。有些人不知道如何填写使用场景信息，这项要求写200字以上。我提供一个Demo仅供参考：

我们公司是做物联网节能的，现在公司的项目需要使用到百度地图，前期技术调研，需要先以开发者个人的名义注册一个账号进行开发用，后面会以公司的名义重新申请百度开发者账号，主要用于医院、商场等大型建筑的地图定位以及手机端维修工人的位置定位

，以方便清楚维修工人所在的地理位置。我们希望可以在系统中定位到具体某一座城市的大型建筑，并能够缩放建筑二维平面图的大小，以及定位到使用公司App的运维人员所在的位置，方便安排就近的员工对建筑中需要维修的设备进行维修和保养工作。基于以上的需求，

需要应用到贵公司的百度地图服务，还望批准！不甚感谢！

填写完认证信息之后，三五个工作日之内，就会审核，审核通过后，你就可以去创建应用了。

MVC项目中使用百度地图

如果你是BS项目中使用，你的应用类型选择“浏览器端”

 MVC项目中使用百度地图

用百度地图生成器，去生成代码，地址：http://api.map.baidu.com/lbsapi/creatmap/index.html

将生成的代码，直接复制粘贴到项目页面中就可以使用，但是生成的代码毕竟是生成的，你需要自己进行重构。

你还可以去百度API示例中去寻找例子，然后进行修改，改造成你需要的样子。地址：http://developer.baidu.com/map/jsdemo.htm#c1_3

假如我要做成下面的效果：

MVC项目中使用百度地图

可以看出是要添加多个覆盖物，注意，这不是信息窗口，因为信息窗口只能在页面中显示一个，而且使用信息窗口有一个很蛋疼的事情，那就是信息窗口的最小宽度是250px，你无法修改。

在母版页中添加百度api引用

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

需要注意的是要在jquery.js之前引用，否则会有冲突。

View视图代码如下：

MVC项目中使用百度地图
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<!--引用百度地图API-->
<div style="margin-bottom:5px;">
    <input class="form-control input-inline" id="txtWords" placeholder="搜索地区" value="" type="text" />
    <button id="btnSearch" class="btn sbold yellow-casablanca" onclick="searchMap();">
        <i class="fa fa-search"></i>搜索地图
    </button>
</div>
<!--百度地图容器-->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="mapContent"></div>
@section scripts
{
<script src="~/Content/js/common/base-BaiduMap.js"></script>
    <script type="text/javascript">
    //标注点数组
    var markerArr = [
    {
        title: "紫衡技术", electricity: "0kwh", water: "1吨", air: "0m³", alarm: "2次", point: "114.011944|22.602072", isOnline: 0
    },
    {
        title: "银谷科技", electricity: "10kwh", water: "2吨", air: "30m³", alarm: "1次", point: "114.011086|22.601413", isOnline: 0
    }
    ];
    BaiduMapObj.init("mapContent", 114.011944, 22.602072, markerArr,19);//创建和初始化地图
    function searchMap(){
        BaiduMapObj.searchMap("mapContent","txtWords",markerArr);
    }
    </script>
}
MVC项目中使用百度地图

css样式我放到独立的样式文件中，通过母版页进行引入

MVC项目中使用百度地图
/*--------------百度地图----------------*/
.iw_poi_title {
    color: white;
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    padding-right: 13px;
    white-space: nowrap;
}
.iw_poi_content {
    font: 12px arial,sans-serif;
    overflow: visible;
    padding-top: 4px;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
}
.OverlayInsideDiv{position:absolute;height:140px;width:130px;overflow:hidden;opacity:0.9;}
.OverlayInsideDiv p{ margin: 5px 0 0;padding: 0;color:#3B9B8B;}
.OverlayInsideDiv p span{color:#8B8E93;}
MVC项目中使用百度地图

将要使用的js进行封装，base-BaiduMap.js代码如下：

MVC项目中使用百度地图 View Code

你会发现在js代码的最顶部，我添加了如下代码：

//# sourceURL=base-BaiduMap.js

这是因为我项目是使用ajax布局，动态加载页面和页面的js的，所以如果你不添加此代码，在浏览器中将无法进行调试，因为浏览器的调试器中将看不到这个动态加载进来的js文件。sourceURL=后面的是别名，通常和文件名一致方便区分。把这个功能模块的js全部封装到一个对象中，这样就只暴露了一个全局变量入口。我前端js这一块很戳，被以前公司的前端说“基础太差”，所以大家将就着看，毕竟我现在还是一个准初级前端工程师......

这实在是太简单了，没什么好讲的，只是有一点，大家在写代码的过程中，尽量做到不要重复你的代码，这是最最基本的原则。

其实，使用一些第三方的API，真的很简单，你只需要先大概过一遍API文档，知道它能做什么，然后你需要哪方面的功能，就再专门细看一下这块的功能文档和示例，然后自己照着改就可以了。


本文转自邹琼俊博客园博客，原文链接：http://www.cnblogs.com/jiekzou/p/7427843.html，如需转载请自行联系原作者

相关推荐