1.环境
百度地图js ：
http://api.map.baidu.com/api?v=2.0&ak=申请的秘钥
2.框架：ssm
3.代码
3.1java代码
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import cn.com.paic.entity.Projcect;
@Controller
@RequestMapping("/map")
public class MapController {
@RequestMapping("/showMap")
public String toMap(HttpServletRequest request,Model model){
return "mapView";
}
@ResponseBody
@RequestMapping(value="/data")
public List<Projcect> reData()
{
List<Projcect> result = new ArrayList<Projcect>();
Projcect p1 = new Projcect("3005S00000049",
"蓝光重庆大渡口39亩中央广场项目",
"成都分公司",
3005001,
"重庆市大渡口区大渡口组团E分区E11/02号",
106.465322,
29.42414);
Projcect p2 = new Projcect("3005S00000071",
"平安成都空港冷链物流园",
"成都分公司",
3005008,
"成都双流西航港开发区",
104.030911,
30.579028);
Projcect p3 = new Projcect("3005S00000140",
"东原武汉洪山区板桥村项目",
"武汉分公司",
3005001,
"南湖片二三环间· 地铁物业，由K1、K2、K3三个地块组成 ，其中K1位于李纸公路西侧，K2和K3位于李纸公路东侧",
120.844535,
30.716358);
result.add(p1);
result.add(p2);
result.add(p3);
return result;
}
}
3.2 mapView.jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!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">
<!-- css -->
<style type="text/css">
body, html{
width: 100%;
height: 100%;
margin:0;
font-family:"微软雅黑";
font-size:14px;
}
</style>
<!-- js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.5.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=------------------" type="text/javascript"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/map.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>
<title>baidu map</title>
</head>
<body>
<h1>Hello Baidu Map</h1>
<div id="map" style="width:640px;height:500px;" ></div>
</body>
</html>3.3 map.js代码
$(document).ready(function(){
initMap();//地图初始化
//覆盖物设置
// var marker = new BMap.Marker(new BMap.Point(115,35)); //创建点
// map.addOverlay(marker); //增加点
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
}
//创建地图函数：
function createMap(){
map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(115,35),5);
}
//地图事件设置函数：
function setMapEvent(){
map.enableScrollWheelZoom();
map.enableKeyboard();
map.enableDragging();
}
//地图控件添加函数：
function addMapControl(){
var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(navControl);
}
$.ajax({
type : 'GET',
url : 'data',
//设置contentType类型为json
contentType : 'application/json;charset=utf-8',
//请求参数json数据
// data : '{"username":"reader001","password":"psw001"}',
//请求成功后的回调函数
success : function(data) {
data = $.parseJSON(data);
addProject(data);
}
});
function addProject(projcectList){
map.clearOverlays();
for (var i = 0; i < projcectList.length; i++) {
var project = projcectList[i];
var marker = new BMap.Marker(new BMap.Point(project["longitude"],project["latitude"])); // 创建标注
var content = "地址：" + (project["address"] == null ? "" : project["address"]);
//跳转到其他jsp
var pageName ;
if(project["businessLine"] == "3005007"){
if(project["type"] == "1"){
pageName = "projectView.jsp";
}else{
pageName = "projectViewTwo.jsp";
}
}else{
pageName = "projectOverview.jsp";
}
var opts = {
width : 100, // 信息窗口宽度
height: 70, // 信息窗口高度
title : "<a href='https://ask.hellobi.com/"+pageName+"?projectNumber="+project["number"]+"&cityName="+project["cityName"]+"&projectType="+project["businessLine"]+"' title='"+project["name"]+"' style='fontSize:12px;text-decoration:none;color:#00bbff;'>"+
(project["name"].length > 13 ? project["name"].substr(0,13) + "..." : project["name"])+"</a>", // 信息窗口标题
};
map.addOverlay(marker);
//添加悬浮层事件
addMouseHandler(content,marker,opts);
function addMouseHandler(content,marker,opts){
marker.addEventListener("click",function(e){
openInfo(content,e,opts);
});
}
function openInfo(content,e,opts){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
}
}
}
});
4.效果
本站文章版权归原作者及原出处所有 。内容为作者个人观点， 并不代表本站赞同其观点和对其真实性负责。本站是一个个人学习交流的平台，并不用于任何商业目的，如果有任何问题，请及时联系我们，我们将根据著作权人的要求，立即更正或者删除有关内容。本站拥有对此声明的最终解释权。