java呼叫百度地圖API開發，百度線上地圖開發——未完待續
阿新 • • 發佈：2018-11-10
這裡是目錄
一、引入百度地圖API
百度地圖官方示例：http://lbsyun.baidu.com/jsdemo.htm#a1_2
前臺呼叫百度地圖開發之前要先引入，百度地圖API，
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的金鑰"></script>
您的祕鑰需要到百度地圖申請；http://lbsyun.baidu.com/apiconsole/key
二、百度地圖開發
1、定義一個div來存放地圖
<body>
<div id="baidu_map"></div>
</body>
2、生成地圖
<script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("baidu_map"); // 建立Map例項 var point = new BMap.Point(116.404, 39.915);//建立一個座標點 map.centerAndZoom(point, 11); // 初始化地圖,設定中心點座標和地圖級別 map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放 </script>
3、新增一個跳躍的點
var marker = new BMap.Marker(point); // 建立標註
map.addOverlay(marker); // 將標註新增到地圖中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫4、新增控制元件
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，新增比例尺 var top_left_navigation = new BMap.NavigationControl(); //左上角，新增預設縮放平移控制元件 var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，僅包含平移和縮放按鈕 map.addControl(top_left_control); map.addControl(top_left_navigation); map.addControl(top_right_navigation);
5、有其他需要的請留言
完整版程式碼
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<title>百度線上地圖</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的祕鑰"></script>
</head>
<body>
<div id="baidu_map" style="width: 800px ; height: 500px">載入中,請稍後...</div>
</body>
<script type="text/javascript">
//新增地圖
var map = new BMap.Map("baidu_map");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15); // 初始化地圖,設定中心點座標和地圖級別
map.enableScrollWheelZoom(); // 啟用滾輪放大縮小。
//新增一個跳躍的點
var marker = new BMap.Marker(point); // 建立標註
map.addOverlay(marker); // 將標註新增到地圖中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫
//新增控制元件
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，新增比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角，新增預設縮放平移控制元件
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，僅包含平移和縮放按鈕
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.addControl(top_right_navigation);
</script>
</html>