Baidu 地図を使用して、まず Baidu 地図開発者プラットフォームにアクセスします
- 百度アカウントを登録する
- 地図アプリケーションを作成する
- Ak を取得
(「Ak を取得」をクリックしてコンソール → アプリケーション管理 → 私のアプリケーションをクリック) バックアップのために Ak をコピーします
百度地図を使用する
1. js を導入します (アドレスを直接コピーするだけです)。キーは ak です。
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的密钥"></script>
2. HTMLコンテナを指定する
<div id="container">
- 初期化
var map = new BmapGL.Map("container")
var point = new BmapGL.Point(经度,纬度)
map.centerAndZoom(point,16) // 地图缩放比例
4. コントロールを追加する
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
完全な例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度地图</title>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=DUBI3kfceQ8KSiMlXC5eIj1d8ETPKAGm">
</script>
<style>
#container{
width: 800px;
height: 600px;
/* 设置地图的宽高 */
}
</style>
</head>
<body>
<!-- 容器存放地图 -->
<div id="container"></div>
<script>
// 创建一个地图的实例
var map = new BMapGL.Map("container");
//创建一个点(经度,纬度)
var point = new BMapGL.Point(113.6648, 34.7835);
// 缩放地图 point为中心,15级缩放
map.centerAndZoom(point,17);
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>
</body>
</html>
結果(マウスホイールをスライドするとズームします) 5.ポイント
を描画(マップ上に属性を追加)します
var point = new BmapGL.Marker(point)
ワイヤー
var polyline = new BmapGL.Polyline(点的数组,线的参数)
麺類
var polygon = new BmapGL.Polygon(点的数组,面的参数)
ラウンド
var circle = new BmapGL.Circle(点,米半径,圆的参数)
マーク
new BMapGL.Label(`内容`,{
point:位置,offset:new BMapGL.Size(10, -25) }
オーバーレイを追加する
map.addOverlay(点/线/面)
取り除く
map.remveOverLay(点/线/面)
完全な例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度地图</title>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=DUBI3kfceQ8KSiMlXC5eIj1d8ETPKAGm">
</script>
<style>
#container{
width: 800px;
height: 600px;
/* 设置地图的宽高 */
}
</style>
</head>
<body>
<!-- 容器存放地图 -->
<div id="container"></div>
<script>
// 创建一个地图的实例
var map = new BMapGL.Map("container");
//创建一个点(经度,纬度)
var point = new BMapGL.Point(113.6648, 34.7835);
// 缩放地图 point为中心,15级缩放
map.centerAndZoom(point,17);
// 在地图添加一个点
var marker = new BMapGL.Marker(point); // 实例化标记
map.addOverlay(marker); // 添加标记在地图中
// 绘制一个圆 Circle圆,stroke线,color颜色Weight粗细,Opacity透明度
var circle = new BMapGL.Circle(point,1000,{
strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(circle);
var list = [];//存储用户点击的点
var tempMarker = null; //存储要移除的上一个点
// 给地图添加点击事件
map.addEventListener("click",function(e){
if(tempMarker){
//如果有上个点就移除上一个点
map.removeOverlay(tempMarker);
}
// 获取点击位置的经度和纬度
var p = new BMapGL.Point(e.latlng.lng,e.latlng.lat); //创建点
list.push(p);//存储
var m = new BMapGL.Marker(p);
tempMarker = m;//创建一个临时要要移除的点
map.addOverlay(m); // 添加标记在地图中
})
map.addEventListener("dblclick",function(){
tempMarker?map.removeOverlay(tempMarker):'';//如果有tempMarker就移除
list.push(list[0]);//把第0个点复制一份添加到最后面
// 绘制线
var polyline = new BMapGL.Polygon(list, {
strokeColor:"blue", strokeWeight:5, strokeOpacity:0.5,fillColor:"#f00",fillOpacity:0.5})
// var polyline = new BMapGL.Polyline(list, {strokeColor:"blue", strokeWeight:5, strokeOpacity:0.5})
list = [];//清空list
map.addOverlay(polyline);
})
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>
</body>
</html>
結果 (場所をクリックすると点が生成され、複数の点をクリックしてからダブルクリックすると領域が形成されます)
6. 情報ウィンドウ
オプションを追加します。
var opts = {
width : 400, // 信息窗口宽度
height: 300, // 信息窗口高度
title : "奇酷学院" , // 信息窗口标题
}
意味
var infoWindow = new BMapGL.InfoWindow(`html内容">`, opts);
開ける
map.openInfoWindow(infoWindow, point); //开启信息窗口
完全な例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度地图</title>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=DUBI3kfceQ8KSiMlXC5eIj1d8ETPKAGm">
</script>
<style>
#container{
width: 800px;
height: 600px;
/* 设置地图的宽高 */
}
</style>
</head>
<body>
<!-- 容器存放地图 -->
<div id="container"></div>
<script>
// 创建一个地图的实例
var map = new BMapGL.Map("container");
//创建一个点(经度,纬度)
var point = new BMapGL.Point(113.6648, 34.7835);
// 缩放地图 point为中心,15级缩放
map.centerAndZoom(point,17);
// 在地图添加一个点
var marker = new BMapGL.Marker(point); // 实例化标记
map.addOverlay(marker); // 添加标记在地图中
var label = new BMapGL.Label(`中国<strong>前端</strong>学习`, {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(10, -25) // 设置标注的偏移量
})
map.addOverlay(label);
var opts = {
width : 400, // 信息窗口宽度
height: 300, // 信息窗口高度
title : "奇酷学院" , // 信息窗口标题
}
var infoWindow = new BMapGL.InfoWindow(`地址:郑州市东三街,先锋商务8楼<br/><img width="380" src="http://statics.qikuedu.com/images/page_aboutus/About_34.jpg">`, opts); // 创建信息窗口对象
// 给标记添加点击事件
marker.addEventListener("click",function(){
// 打开信息窗口,在点的位置
map.openInfoWindow(infoWindow, point); //开启信息窗口
})
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>
</body>
</html>
結果 (赤い点をクリックするとプロンプト ボックスが表示されます)