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

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

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

我们公司是做物联网节能的,现在公司的项目需要使用到百度地图,前期技术调研,需要先以开发者个人的名义注册一个账号进行开发用,后面会以公司的名义重新申请百度开发者账号,主要用于医院、商场等大型建筑的地图定位以及手机端维修工人的位置定位
,以方便清楚维修工人所在的地理位置。我们希望可以在系统中定位到具体某一座城市的大型建筑,并能够缩放建筑二维平面图的大小,以及定位到使用公司App的运维人员所在的位置,方便安排就近的员工对建筑中需要维修的设备进行维修和保养工作。基于以上的需求,
需要应用到贵公司的百度地图服务,还望批准!不甚感谢!

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

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

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

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

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

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

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

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

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

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

View视图代码如下:

@{
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>
}

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

/*--------------百度地图----------------*/
.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:;color:#3B9B8B;}
.OverlayInsideDiv p span{color:#8B8E93;}

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

// ajax加载调试用
//# sourceURL=base-BaiduMap.js //BaiduMapObj 百度地图扩展--created by zouqj 2017-8-24
var BaiduMapObj = (function () {
var map = null;
var iconObj = { w: 21, h: 21, l: 0, t: 0, x: 6, lb: 5 }
//创建一个Icon
var createIcon = function (json) {
var icon = new BMap.Icon("http://map.baidu.com/image/us_mk_icon.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) })
return icon;
}
//搜索地区(地区)
this.searchMap = function (id, txtWords, markerArr) {
var area = document.getElementById(txtWords).value; //得到地区
var ls = new BMap.LocalSearch(map);
ls.setSearchCompleteCallback(function (rs) {
if (ls.getStatus() == BMAP_STATUS_SUCCESS) {
var poi = rs.getPoi(0);
if (poi) {
BaiduMapObj.init(id, poi.point.lng, poi.point.lat, markerArr);
}
}
});
ls.search(area);
};
//创建地图函数:
this.createMap=function(id,x, y, _level) {
var map = new BMap.Map(id);//在百度地图容器中创建一个地图
var point = new BMap.Point(x, y);//定义一个中心点坐标
map.centerAndZoom(point, _level);//设定地图的中心点和坐标并将地图显示在地图容器中
return map;
}
//地图事件设置函数:
this.setMapEvent = function (map) {
map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数:
this.addMapControl = function (map) {
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
map.addControl(ctrl_sca);
}
//创建marker
this.addMarker = function (map,markerArr) {
for (var i = 0; i < markerArr.length; i++) {
var json = markerArr[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
var point = new BMap.Point(p0, p1);
//var iconImg = createIcon(icon);
var marker = new BMap.Marker(point);//创建图标 , { icon: iconImg }
//var iw = createInfoWindow(i);
var label = new BMap.Label(json.title, { "offset": new BMap.Size(iconObj.lb - iconObj.x + 10, -20) });
marker.setLabel(label);
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
label.setStyle({
borderColor: "#808080",
color: "#333",
cursor: "pointer",
border: "0px",
'background-color': ""
}); //(function () {
// var index = i;
// var _iw = createInfoWindow(i);
// var _marker = marker;
// _marker.addEventListener("click", function () {
// this.openInfoWindow(_iw);
// });
// _iw.addEventListener("open", function () {
// _marker.getLabel().hide();
// })
// _iw.addEventListener("close", function () {
// _marker.getLabel().show();
// })
// label.addEventListener("click", function () {
// _marker.openInfoWindow(_iw);
// })
// if (!!json.isOpen) {
// label.hide();
// _marker.openInfoWindow(_iw);
// }
// _marker.openInfoWindow(_iw);
//})()
}
}
// 复杂的自定义覆盖物
function ComplexCustomOverlay(point, text, mouseoverText) {
this._point = point;
this._text = text;
if (mouseoverText != undefined) {
this._overText = mouseoverText;
}
}
//创建覆盖物
this.addOverLay = function (map,markerArr) {
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function (map) {
this._map = map;
var div = this._div = document.createElement("div");
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat); var arrow = this._arrow = document.createElement("div");
div.className = "OverlayInsideDiv";
arrow.style.position = "absolute";
arrow.style.top = "10px";
arrow.style.left = "10px";
arrow.innerHTML = this._text;
div.appendChild(arrow); div.style.backgroundColor = "#313642";
arrow.style.backgroundPosition = "0px 0px";
map.getPanes().labelPane.appendChild(div); return div;
}
ComplexCustomOverlay.prototype.draw = function () {
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
this._div.style.top = pixel.y - 30 + "px";
}
for (var i = 0; i < markerArr.length; i++) {
var json = markerArr[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
var txt = "<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><p><span>电耗:</span>" + json.electricity
+ "<p><span>水耗:</span>" + json.water + "</p><p><span>气耗:</span>" + json.air + "</p><p><span>报警:</span>" + json.alarm + "</p>";
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(p0, p1), txt);
map.addOverlay(myCompOverlay);
}
}
//初始化(地图容器id,中心点坐标x,y,标注点数组,[地图等级:默认19])
this.init = function (id,x, y, markerArr, level) {
var _level = level == undefined ? 19 : level;
map = BaiduMapObj.createMap(id, x, y, _level);
BaiduMapObj.setMapEvent(map);//设置地图事件
BaiduMapObj.addMapControl(map);//向地图添加控件
BaiduMapObj.addMarker(map,markerArr);//向地图中添加marker
BaiduMapObj.addOverLay(map,markerArr);//向地图中添加覆盖物
}
return this;
}).call({});

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

//# sourceURL=base-BaiduMap.js

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

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

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

MVC项目中使用百度地图的更多相关文章

  1. Android 百度地图开发(一)--- 申请API Key和在项目中显示百度地图

      标签: Android百度地图API Key  分类: Android 百度地图开发(2)    最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地 ...

  2. Android Studio 项目中集成百度地图SDK报Native method not found: com.baidu.platform.comjni.map.commonmemcache.JNICommonMemCache.Create:()I错误

    Android Studio 项目中集成百度地图SDK报以下错误: java.lang.UnsatisfiedLinkError: Native method not found: com.baidu ...

  3. 安卓---项目中插入百度地图sdk

    百度地图 应用里面 自带地图 搜房网 下载百度地图的sdk 熟悉api 注冊百度开发人员的账号 2.12 仅仅要有一个ak就能够 高版本号须要提供应用程序的包名和签名返回开发人员的序列号 使用百度地图 ...

  4. vue 项目中引用百度地图

    新建map.js export const BaiduMap = { init: function() { const BMapURL = 'https://api.map.baidu.com/api ...

  5. vue项目中使用百度地图的方法

    1.在百度地图申请密钥: http://lbsyun.baidu.com/  将 <script type="text/javascript" src="http: ...

  6. react项目中引入百度地图打包报错问题

    一.我正常引入百度地图,调试时候是好使的,但是打包时候就报错 引入方法如下: 报错如图 正常调试是好使的,但是打包报这个错,解析不了这个BMap,那么怎么办呢? 然后我就转用了window办法,虽然因 ...

  7. 在ionic/cordova中使用百度地图插件

    在ionic项目中,如果想实现定位功能,可以使用ng-cordova提供的cordova-plugin-geolocation. 但由于高墙的缘故,国内andorid环境下,此插件不起作用(ios环境 ...

  8. Vue中使用百度地图——根据输入框输入的内容,获取详细地址

    知识点:在Vue.js项目中调用百度地图API,实现input框,输入地址,在百度地图上定位到准确地址,获得到经纬度 参考博客:  百度地图的引用,初步了解参考博客:http://blog.csdn. ...

  9. Android中调用百度地图

    一.调用百度地图 --第一种方法 1.下载百度地图SDK SDK可以拆分下载,需要使用那一部分功能就下载相应包含的SDK,如下图 核心的的jar 和so包,放在工程中的libs目录下 2.申请key ...

随机推荐

  1. <jsp:include>和<%@include%>的区别

    个人笔记(并非自己总结,而是从别人的博客上看到的) <jsp:include> :动态包含 1.<jsp:include>包含的是html文件 举例: DynamicInclu ...

  2. Luogu 1064 金明的预算方案 / CJOJ 1352 [NOIP2006] 金明的预算方案(动态规划)

    Luogu 1064 金明的预算方案 / CJOJ 1352 [NOIP2006] 金明的预算方案(动态规划) Description 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己 ...

  3. JS - 数据类型的值拷贝函数(深拷贝)

    function mottoClone (obj) { if (obj === null || typeof obj !== 'object') return obj; if (obj instanc ...

  4. app耗电优化之四 使用AlarmManager对任务进行合理安排

    AlarmManager 是用来设定定时任务.即用来设定那个任务在什么时候开始执行.为什么和省电有关系?这个需要和AlarmManager的使用先说起.AlarmManager 实际上只起到一个定时发 ...

  5. python数据库学习--Mysql

    摘要: Python使用mysql需要安装驱动,有两种1)mysqldb 2)umysql  ,两者都是开源,具体区别不详,umysql没用过 一.mysqldb 安装MySQL驱动--http:// ...

  6. HTML5 开发APP(头部和底部选项卡)

    我们开发app有一定固定的样式,比如头部和底部选项卡部分就是公共部分就比如我在做的app进来的主页面就像图片显示的那样 我们该怎么实现呢,实现我们应该建一个主页面index.html,然后建五个子页面 ...

  7. margin属性的正负值确定

    margin属性用来使用设置外边距,大多数情况使用正值,但是一些稍复杂的定位就会使用到负值,所以对margin属性的正负值理解是有必要的,本文同时解释了margin-right和margin-bott ...

  8. DDD理论学习系列(13)-- 模块

    DDD理论学习系列--案例及目录 1. 引言 Module,即模块,是指提供特定功能的相对独立的单元.提到模块,你肯定就会想到模块化设计思想,也就是功能的分解和组合.对于简单问题,可以直接构建单一模块 ...

  9. 香港服务器PING知识知多少?

    香港服务器PING命令简介: PING命令是用来检查要到达的目标IP地址并记录结果,显示目标是否响应以及接收答复所需的时间.如果在传递到目标过程中有错误,ping 命令将显示错误消息. 我们在HOST ...

  10. Java的三种代理模式简述

    本文着重讲述三种代理模式在java代码中如何写出,为保证文章的针对性,暂且不讨论底层实现原理,具体的原理将在下一篇博文中讲述. 代理模式是什么 代理模式是一种设计模式,简单说即是在不改变源码的情况下, ...