百度地圖API要先申請key。
申請了之後代碼如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>
<title>用城市名設定地圖中心點</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap"); // 建立Map執行個體
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地圖,設定中心點坐标和地圖級别。
map.enableScrollWheelZoom(); //啟用滾輪放大縮小
// 建立位址解析器執行個體
var myGeo = new BMap.Geocoder();
// 将位址解析結果顯示在地圖上，并調整地圖視野
myGeo.getPoint("上海市虹口區臨潼路255号", function(point){
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
}
}, "上海");
</script>
谷歌地圖相對簡單一些，隻要定位一些經緯度就可以了，代碼如下：上海黃浦區：
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(31.23, 121.48)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
demo下載下傳：
谷歌地圖：http://pan.baidu.com/s/1eQqsjgm
百度地圖：http://pan.baidu.com/s/1sjJHZ5N
![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)