使用百度地图——入门
创建一个地图对象
创建一个新点
初始化地图，设置中心坐标和地图级别
配置地图的其他特点：加入变焦控制、启用鼠标滚轮缩放功能
创建覆盖物对象
创建标注对象
设置标注的标题
加入对象属性
给标注加入事件监听函数
将标注加入到地图中
<%@ 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>
