百度地圖定位顯示
//單個地圖顯示
<html>
<head><title>百度地圖</title>
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
<script src="/static/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="container" style="width:1500px;height:200px;"></div>
</body>
<script type="text/javascript">
var map = new BMap.Map("container"); //在container容器中建立一個地圖,引數container為div的id屬性;
var point = new BMap.Point(116.29196833333334,40.043731666666666); //建立點座標
map.centerAndZoom(point, 14); //初始化地圖,設定中心點座標和地圖級別
map.enableScrollWheelZoom(); //啟用滾輪調整大小功能
map.addControl(new BMap.NavigationControl()); //新增控制元件:縮放地圖的控制元件,預設在左上角;
map.addControl(new BMap.MapTypeControl()); //新增控制元件:地圖型別控制元件,預設在右上方;
map.addControl(new BMap.ScaleControl()); //新增控制元件:地圖顯示比例的控制元件,預設在左下方;
map.addControl(new BMap.OverviewMapControl()); //新增控制元件:地圖的縮圖的控制元件,預設在右下方;
map.addControl(new window.BMap.Marker(point));//定位點顯示紅球標記
</html>
list地圖顯示
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>百度地圖</title>
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
<script src="/static/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<c:forEach items="${maps}" var="map" varStatus="i">
<div id="container${i.index }" style="width: 1500px; height: 200px;"></div>
<script>
var longitude = map.longitude;
var latitude = map.latitude;
//var data = ${maps};
//var longitude = data['${i.index}'].longitude;
//var latitude = data['${i.index}'].latitude;
var map = new BMap.Map("container"+'${i.index}'); //在container容器中建立一個地圖,引數container為div的id屬性;
var point = new BMap.Point(longitude,latitude); //建立點座標
map.centerAndZoom(point, 14); //初始化地圖,設定中心點座標和地圖級別
map.enableScrollWheelZoom(); //啟用滾輪調整大小功能
map.addControl(new BMap.NavigationControl()); //新增控制元件:縮放地圖的控制元件,預設在左上角;
map.addControl(new BMap.MapTypeControl()); //新增控制元件:地圖型別控制元件,預設在右上方;
map.addControl(new BMap.ScaleControl()); //新增控制元件:地圖顯示比例的控制元件,預設在左下方;
map.addControl(new BMap.OverviewMapControl()); //新增控制元件:地圖的縮圖的控制元件,預設在右下方; TrafficControl
map.addControl(new window.BMap.Marker(point));//定位點顯示紅球標記
</script>
</c:forEach>
</body>
</html>