百度地图开发者中心
进入web开发
2、注册百度开发者账号
3.阅读开放平台概述
4.创建应用
创建完成：
百度地图开放平台 javaScript API 类参考地址
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
html,body,#map{width: 100%;height: 100%;}
</style>
<!--引入百度地图API接口以及创建应用的AK-->
<script src="http://api.map.baidu.com/api?v=2.0&ak=VU8AvenH7fZ4lf00DATgVDFf5GF5ZAwc"></script>
</head>
<body>
<!--地图存放位置-->
<p id="map"></p>
</body>
<script src="js/UMap.js"></script>
<script src="js/baidu.js"></script>
</html>
//baidu.js文件
function init(){
//设置地图的显示类型 及缩放最小值
var opt={mapType:BMAP_NORMAL_MAP,minZoom:4};
var map=new BMap.Map('map',opt);
//初始化地图
map.centerAndZoom("北京");
var center=new BMap.Point(116.519072,39.931867);
map.centerAndZoom(center,18);
//禁止拖拽
map.disableDragging();
//禁用双击放大
map.disableDoubleClickZoom();
//启用滚轮放大缩小
map.enablescrollWheelZoom();
//右键启用地图拖拽
map.addeventlistener('rightclick',function(){
map.enableDragging();
});
//创建定位控件 img/icon.jpg定位图片
var location=new BMap.GeolocationControl({
locationIcon:new BMap.Icon('img/icon.jpg',new BMap.Size(50,50))
});
//控件位置右上角
location.setAnchor(BMAP_ANCHOR_TOP_RIGHT);
//控件偏移
location.setoffset(new BMap.Size(100,50));
map.addControl(location);
//右键双击隐藏/开启控件
map.addEventListener("rightdblclick",function () {
location.isVisible()?location.hide():location.show();
});
//返回当前的定位信息，若当前还未定位，则返回nul
settimeout(function(){
location.location();
console.log(location.getAddresscomponent());
},3*1000);
//定位成功触发事件
map.addEventListener("locationSuccess",function (result) {
console.log(result);
});
//地图类型控件可选项
var mapTypeControl=new BMap.MapTypeControl({
type:BMAP_MAPTYPE_CONTROL_MAP,
maptypes:[BMAP_NORMAL_MAP,BMAP_PERSPECTIVE_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP],
offset:new BMap.Size(5,80)
});
map.addControl(mapTypeControl);
//设置版权控件位置
var CopyrightControl = new BMap.CopyrightControl({
anchor: BMAP_ANCHOR_TOP_RIGHT,
offset:new BMap.Size(100,20)
});
//添加版权控件
map.addControl(CopyrightControl);
//返回地图可视区域
var getBounds= map.getBounds();
//Copyright(id,content,bounds)类作为CopyrightControl.addCopyright()方法的参数
CopyrightControl.addCopyright({
id: 1,
content: "<a href='#' style='font-size:20px;background:red;color:white'>我是百度 我怕谁</a>",
bounds: getBounds
});
//全景控件
var PanoramaControl=new BMap.PanoramaControl()
map.addControl(PanoramaControl);
//实例化新创建的控件放到map上
var scaleControl= new UMap.ScaleControl();
map.addControl(ScaleControl);
//创建自定义图标代替大头针
var icon = new BMap.Icon('img/baidu.png',new BMap.Size(40,40));
icon.setImageSize(new BMap.Size(40,40));
//创建大头针标注
var marker = new BMap.Marker(center,{
icon:icon,
//微调大头针箭头指向误差
offset:new BMap.Size(85,25)
});
map.addoverlay(marker);
//坠落动画
marker.setAnimation(BMAP_ANIMATION_DROP);
//双击创建大头针 像素坐标 经纬度坐标 互相转换
map.addEventListener("dblclick",function (event) {
var icon = new BMap.Icon('img/baidu.png',new BMap.Size(40,40));
icon.setImageSize(new BMap.Size(40,40));
var marker = new BMap.Marker(event.point,{
icon:icon
});
//将setAnimation放到addOverlay后 创建大头针跳动效果
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
});
}
init();//UMap.js文件 自定义控件
window.UMap = window.UMap || {};
(function() {
function ScaleControl() {
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(50, 50);
}
ScaleControl.prototype = new BMap.Control();
ScaleControl.prototype.initialize = function(map) {
//创建button按钮
var container = document.createElement("p");
var maxButton = document.createElement('button');
var minButton = document.createElement('button');
maxButton.textContent='+';
minButton.textContent='-';
container.APPendChild(maxButton);
container.appendChild(minButton);
maxButton.style.csstext = minButton.style.cssText = "font-size:20px;padding:2px 5px";
//点击地图放大或缩小
maxButton.οnclick=minButton.οnclick=function(){
this.textContent=='+'?map.zoomIn():map.zoomOut();
};
map.getContainer().appendChild(container);
return container;
};
UMap.ScaleControl = ScaleControl;
})();
相关阅读
百度UNIT 机器人多轮对话技能创建以及API调用 基于百度UNIT2.0 版本，实现简单的多轮人机对话功能 创建机器人必备条件 确定有哪
HTML5历史状态管理history API-pushState/replaceStat
【本文源址：http://blog.csdn.net/q1056843325/article/details/60607402 转载请添加该地址】 AJAX技术对我们前端产生了巨大影响
使用百度地图api模拟实时定位页面 完整示例 效果：使用百度地图api在页面上显示车辆的实时位置，并有自动刷新和手动刷新两种方
百度地图级别范围：1~19级 级别 比例尺 19级 20m 18级 50m 17级 100m 16级 200m 15级 500m
7月11日可能是papi酱人生当中的一个重要里程碑。因为这一天她和她的团队第一次“赤裸裸”地出现在人们面前（美拍、一直播、斗鱼直