大家好，又见面了，我是全栈君。
创建一个地图对象
创建一个新点
初始化地图，设置中心坐标和地图级别
配置地图的其他特点：加入变焦控制、启用鼠标滚轮缩放功能
创建覆盖物对象
创建标注对象
设置标注的标题
加入对象属性
给标注加入事件监听函数
将标注加入到地图中
代码语言：javascript复制<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page import="com.telewave.systemejb.entity.SysUser"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地图展示项目</title>
<s:include value="/jsps/common/includeExtJs.jsp"></s:include>
<s:include value="/jsps/common/form.jsp"></s:include>
<s:include value="/jsps/common/validator.jsp"></s:include>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%
}
</style>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=1.5&ak=A4749739227af1618f7b0d1b588c0e85"> //v1.5版本号的引用方式：src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥" //v1.4版本号及曾经版本号的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"</script></head><body> <div id="container"></div> <script type="text/javascript"> //查看项目信息 function viewProjectInfo(id) { //參数说明：项目id if (id) { var url = ctxpath "/projectInfoAction!view.action?projectinfo.projectid=" id "&s=" Math.random(); url = encodeURI(url);//这里须要编码。防止中文參数变乱码 Telewave.Data.Show(url, Telewave.oModelConfig.Title.View, false, 800, 600); } else { Ext.Msg.alert('提示信息', '该条数据未有唯一标识！'); } } //在地图上标注全部的项目 function markProjectOnMap() { $.ajax({ url : ctxpath "/projectInfoAction!markProjectOnMap.action", async : true, data : 's=' Math.random(), type : "POST", dataType : 'json', success : function(response) { var items = eval("response"); // 1.创建地图 var map = new BMap.Map("container"); // 创建地图实例 （參数说明：元素/元素的类别/元素的id） // var point = new BMap.Point(113.18, 23.10); // 创建点坐标 （參数说明：1.经度 2.纬度） var point = new BMap.Point(104.114129, 37.550339); map.centerAndZoom(point, 5); // 初始化地图，设置中心点坐标和地图级别 （參数说明：1.中心坐标 2.地图缩放级别） map.addControl(new BMap.NavigationControl()); //加入缩放控件 map.enableScrollWheelZoom(); //启用鼠标滑轮缩放功能 // 2.循环创建标注 var markerTemp; var pointTemp; for ( var i = 0; i < items.total; i ) { var item = items.items[i]; pointTemp = new BMap.Point(item.longitude, item.latitude); markerTemp = new BMap.Marker(pointTemp); // 创建标注 （參数说明：坐标） markerTemp.setTitle(item.projectName); // 设置标注的标题 markerTemp.id = item.projectId; // 加入对象属性 markerTemp.addEventListener("click", function(e) { // 给标注加入事件监听函数 viewProjectInfo(this.id); }); map.addOverlay(markerTemp); // 将标注加入到地图中 } }, error : function(response) { alert("获取地图坐标失败。"); } }); } $(function() { markProjectOnMap(); }); </script></body></html>參考：
