1 在使用百度地图是，首先的申请密钥（ak）才能成功加载API JS文件。
ak的使用方法：<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" type="text/javascript"></script>
2 移动端使用地图：
将地图容器高设置为100%，使其充满整个屏幕，或者您也可以计算浏览器窗口的大小并进行设置。
添加meta标签 ， <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 这样做是为了让页面以正常比例进行显示并且禁止用户缩放页面的操作。
3 异步加载地图：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8"/>
-
<title>异步加载</title>
-
<script type="text/javascript">
-
function initialize() {
-
var mp = new BMap.Map('map');
-
mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
-
}
-
-
function loadScript() {
-
var script = document.createElement("script");
-
script.src = "http://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=initialize";//此为v2.0版本的引用方式
-
// http://api.map.baidu.com/api?v=1.4&ak=您的密钥&callback=initialize"; //此为v1.4版本及以前版本的引用方式
-
document.body.appendChild(script);
-
}
-
-
window.onload = loadScript;
-
</script>
-
</head>
-
<body>
-
<div id="map" style="width:500px;height:320px"></div>
-
</body>
-
</html>
4 非百度地图的坐标需要转换成百度坐标
<script type="text/javascript">
var points = [new BMap.Point(116.3786889372559,39.90762965106183),
new BMap.Point(116.38632786853032,39.90795884517671),
new BMap.Point(116.39534009082035,39.907432133833574),
new BMap.Point(116.40624058825688,39.90789300648029),
new BMap.Point(116.41413701159672,39.90795884517671)
];
//地图初始化
var bm = new BMap.Map("allmap");
bm.centerAndZoom(new BMap.Point(116.378688937,39.9076296510), 15);
//坐标转换完之后的回调函数
translateCallback = function (data){
if(data.status === 0) {
for (var i = 0; i < data.points.length; i++) {
bm.addOverlay(new BMap.Marker(data.points[i]));
bm.setCenter(data.points[i]);
}
}
}
setTimeout(function(){
var convertor = new BMap.Convertor();
convertor.translate(points, 1, 5, translateCallback)
}, 1000);
</script>
5 给地图添加控件：
使用Map.addControl()方法向地图添加控件。在此之前地图需要进行初始化。
代码：
var map =new BMap.Map("容器id");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); //中心点坐标 ，层级 map.addControl(new BMap.NavigationControl()); //添加地图控件
map.addControl(new BMap.NavigationControl()); //添加平移缩放控件
map.addControl(new BMap.ScaleControl()); //添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.disable3DBuilding(); map.centerAndZoom(point, 14);
map.enableScrollWheelZoom(); //添加滚轮放大缩小
添加自定义控件
添加自定义控件与添加其他控件方法一致，调用map.addControl()方法即可。
// 创建控件实例 var myZoomCtrl = new ZoomControl();
// 添加到地图当中 map.addControl(myZoomCtrl);
6 控件的位置：
控件的位置是由anchor和offset属性一起控制的；
anchor允许的值为：
BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。
BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。
BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。
BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。
offset：
var opts ={offset:new BMap.Size(150,5)}
map.addControl(new BMap.ScaleControl(opts));
7 地图添加覆盖物：
Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。
Marker：标注表示地图上的点，可自定义标注的图标。
Label：表示地图上的文本标注，您可以自定义标注的文本内容。
Polyline：表示地图上的折线。
Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。
Circle: 表示地图上的圆。
InfoWindow：信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开。
注：可以使用map.addOverlay方法向地图添加覆盖物，使用map.removeOverlay方法移除覆盖物，注意此方法不适用于InfoWindow。
相关推荐
亲测好用的百度地图海量marker性能优化，包括重写的百度方法以及个人心得
度娘搜搜网根据研究百度地图搜索API的一些心得，实现度娘百度地图搜索api-智能地方小吃搜索PHP源码，以百度地图搜索API范例的方式发布，，并且不断更新中，度娘地方小吃地图搜索的功能主要集中在动态的用户IP地址...
基于百度SDK的地图软件开发心得.pdf基于百度SDK的地图软件开发心得.pdf基于百度SDK的地图软件开发心得.pdf基于百度SDK的地图软件开发心得.pdf基于百度SDK的地图软件开发心得.pdf基于百度SDK的地图软件开发心得.pdf...
基于百度SDK的地图软件开发心得.docx基于百度SDK的地图软件开发心得.docx基于百度SDK的地图软件开发心得.docx基于百度SDK的地图软件开发心得.docx基于百度SDK的地图软件开发心得.docx基于百度SDK的地图软件开发心得....
路书自定义路线及多路书自定义定位最佳视角，及百度地图坐标矫正精确到0.2米，都是开发心得。供大家参考！
路书自定义路线及多路书自定义定位最佳视角，及百度地图坐标矫正精确到0.2米，都是开发心得。供大家参考！
度娘搜搜网根据研究百度地图搜索API的一些心得，实现度娘百度地图搜索api-智能地方小吃搜索PHP源码，以百度地图搜索API范例的方式发布，，并且不断更新中，度娘地方小吃地图搜索的功能主要集中在动态的用户IP地址...
路书自定义路线及多路书自定义定位最佳视角，及百度地图坐标矫正,路书自定义路线及多路书自定义定位最佳视角，及百度地图坐标矫正精确到0.2米，都是开发心得。供大家参考！
百度地图毕业设计源码 Joomla使用教程 这是针对国内Joomla用户/爱好者/开发者定制的用户使用教程，这个教程旨在为Joomla学员了解Joomla的产品整体及管理使用，帮助开发者了解Joomla的结构逻辑，从而能够介入开发。...
包含源代码、心得体会、操作手册。
百度地图毕业设计源码 这是一个我根据Udacity课程以及网络上的其他资源，结合我自己在学习中的心得体会所构成的笔记。希望能够给一些希望转行自动驾驶的朋友们一点点帮助。由于时间有限与工作繁忙，一次无法更新太多...
百度地图开发java源码 本项目大部分内容来自我近几年的收集和整理，根据计划将主要包含：Java相关知识、网络编程、并发编程、微服务、Linux、数据库、数据结构、算法等知识内容。本人对有深度的系列文章情有独钟，...
简单的地图读取、展示 终于到暑假了。。。开始认真整理整理相关学习的心得体会咯~ 先把很久之前挖的关于C# 二次开发的坑给填上好了~ 这次先计划用一个月把C# ArcEngine 10.0相关开发的学习心得给发布出来好啦~ 第一...
论文题目：android手机基于百度地图的应用与开发 1 第二章 中外文检索词 1 2.1、中文检索词 1 2.2、英文检索词 1 第三章 资料检索 1 3.1、查找馆藏目录 1 3.2、查找中文期刊全文数据库 2 3.3、查找中文学位论文...
通过整合百度地图API、腾讯云API等第三方服务，实现了丰富的功能和良好的用户体验。这款小程序不仅适用于本地游客，还可以帮助外地游客更好地了解乌鲁木齐市的旅游资源，提升城市的旅游形象和知名度。
学习心得使用mpvue学习完成一次完整的小程序开发，熟悉了小程序的组件和API，了解了小程序的开发及上线流程。技术点整理所用到的技术点并方便自己近期翻看巩固小程序的登录(wx.getUserInfo()接口调整)mysql命令...
用户注册账号登陆爱游，可以发布邀约信息，邀约内容可以通过百度地图显示出来。对感兴趣的邀约可以点击坐标，发起聊天（技术原因，爱游暂时只支持手机在后台运行即不被杀掉的情况下收发消息，这一点以后会改进），聊...
百度地图API 之 定位周边搜索POI（奉上源代码） Android 应用小实例--炫酷计时器 android客户端连接服务器并交互实例 Android小项目合集（经典教程） 看到很强大的实例----高仿【优酷】圆盘旋转菜单 的实现 如何...