版权声明：代码共享，欢迎copy https://blog.csdn.net/qq_29073921/article/details/82688204
这里是目录
一、引入百度地图API
百度地图官方示例：http://lbsyun.baidu.com/jsdemo.htm#a1_2
前台调用百度地图开发之前要先引入，百度地图API，
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
您的秘钥需要到百度地图申请；http://lbsyun.baidu.com/apiconsole/key
二、百度地图开发
1、定义一个div来存放地图
<body>
<div id="baidu_map"></div>
</body>2、生成地图
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("baidu_map"); // 创建Map实例
var point = new BMap.Point(116.404, 39.915);//创建一个坐标点
map.centerAndZoom(point, 11); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>3、添加一个跳跃的点
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画4、添加控件
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.addControl(top_right_navigation);5、有其他需要的请留言
完整版代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>百度在线地图</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的秘钥"></script>
</head>
<body>
<div id="baidu_map" style="width: 800px ; height: 500px">加载中,请稍后...</div>
</body>
<script type="text/javascript">
//添加地图
var map = new BMap.Map("baidu_map");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
//添加一个跳跃的点
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
//添加控件
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.addControl(top_right_navigation);
</script>
</html>