jsp 百度地图离线使用_使用百度地图——入门

html {

height: 100%

}

body {

height: 100%;

margin: 0px;

padding: 0px

}

#container {

height: 100%

}

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"

//查看项目信息

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();

});