1.百度地図の紹介

百度地図API百度地図ベースのセットですAPI、JavaScript、iOS、Andriod、静的地図、Web サービスおよびその他のバージョンを含み、基本的な
地図、位置検索、周辺検索、バス運転ナビゲーション、位置サービス、ジオコーディングおよびその他の機能を提供します。
Baidu Maps API の公式 Web サイトはBaidu Mapsです
使用する前に、開発者として登録し、プロンプトに従って実名認証を行う必要があります。登録は成功します。
登録が成功したら、コンソールを開き、アプリケーション管理に入り、アプリケーション名、タイプ、ホワイトリストを入力します。英語は半角で書きます *。
作成が成功すると、以下の図が表示され、キーAKが表示されます。

2. 百度地図の利用

1.百度地図の利用手順

次の図に示すように、作成したばかりのアプリケーションのキー AK を取得し、Baidu マップの js をインポートし、独自の AK を独自のキー AK に置き換えます。
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你自己的AK"></script>
マップコンテナを作成する
<div id="container"></div>
マップを初期化する
var map=new BMap.Map("container")
地図の中心点を作成する
var point new BMap.point(经度，纬度）
中心点を設定し、ホイールをスクロールしてズームします
map.centerAndzoom(point, 1 5); //鼠标滚轮缩放 map.enableScrollWheelZoom(true);
。上記の手順の後、地図が作成されます

2. コントロールを追加する

マップを作成した後、スケールコントロール、ズームコントロール、都市リストコントロールを追加します

var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);

ここに画像の説明を挿入

3. 地図上にコンテンツを描画します（オーバーレイ）

地図上に重ね合わされるすべてのコンテンツは、総称して地図オーバーレイと呼ばれます。

地図上の点をプロットする

var  p = new BMapGL.Point(e.latlng.lng,e.latlng.lat);
// 创建标记
var  m = new BMapGL.Marker(p);

地図上にポリラインを描画する

var polyline = new BMapGL.Polyline(line,{
    
    strokeStyle:"dashed",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});

地図上に多角形を描く

var polygone = new BMapGL.Polygon(line,{
    
    fillColor:"red",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5})

地図上に円を描く

  // 绘制圆圈	
var circle = new BMapGL.Circle(point,2000,{
    
    strokeColor:"green"});
// 添加圆圈
map.addOverlay(circle);

吹き出しを追加する

var label = new BMapGL.Label("中国前端学习基地", {
    
           // 创建文本标注
        position: point,                          // 设置标注的地理位置
        offset: new BMapGL.Size(0, 0)           // 设置标注的偏移量

})  
// 添加标签
map.addOverlay(label);                        // 将标注添加到地图中
// 设置标签的样式
label.setStyle({
    
    
        fontSize:"32px",
        color:"red"

})

情報ウィンドウを追加

var opts = {
    
    
    width: 250,     // 信息窗口宽度
    height: 100,    // 信息窗口高度
    title: "Hello"  // 信息窗口标题
}
var infoWindow = new BMapGL.InfoWindow("World", opts);  // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口

カバーを外す
map.removeOverlay(覆盖物);

4. マップイベント

マーカー.addEventListenerイベントをマップオーバーレイに追加できます。addEventListener
メソッドには、リッスンするイベントの名前と、イベントがトリガーされたときに呼び出す関数の 2 つのパラメーターがあります。
合格削除イベントリスナーイベントのリスナーを削除するメソッド

map.addEventListener('click', handleClick);
function handleClick (e) {
    
    
    alert('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);
    var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
    alert('点的墨卡托坐标：' + mercator[0] + ', ' + mercator[1]);
}
map.removeEventListener('click', handleClick);

5.百度地図の検索機能

1.パスローカル検索キーワードを検索する

var local = new BMapGL.LocalSearch(map, {
    
    
                         renderOptions: {
    
    
                                        map: map
                                }
                        })

6. VueプロジェクトでBaiduマップを使用する方法

方法 1

public/index.html スクリプトで百度地図を導入
コンポーネント内のデータを定義する
map: null, point: null, marker: null, keyword: "", local: null,
マウントされた初期化プロジェクト

// 初始化地图
        
                
                        this.map = new window.BMapGL.Map(this.$refs.map);
                        // 准备一个中心点（经度，纬度）
                        this.point = new window.BMapGL.Point(116.404, 39.915);
                        // 设置中心点和缩放级别
                        this.map.centerAndZoom(this.point, 15);
                        // 鼠标滚轮缩放
                        this.map.enableScrollWheelZoom(true);
                        //添加一个点
                        this.marker = new window.BMapGL.Marker(this.point);
                        //添加覆盖物
                        this.map.addOverlay(this.marker);
                        // 百度地图API功能
                        this.local = new window.BMapGL.LocalSearch(this.map, {
    
    
                                renderOptions: {
    
    
                                        map: this.map

                                }

                        });

                },

データの変更を監視し、地図を更新する

watch: {
    
    
        
                
                        keyword:{
    
    
                                handler() {
    
    
                                        if (this.keyword === "") {
    
    
                                                this.local.clearResults()
                                                this.map.centerAndZoom(this.point, 15);

                                        } else {
    
    
                                                this.local.search(this.keyword)

                                        }

                                }

                        }

                }

方法 2

vue マッププラグイン、vue-baidu-map 170-Vue2 ベースの Baidu マップコンポーネントライブラリを使用できます。公式サイトはダフォークです

3. 百度地図の場合

基本的なマップの例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container{
     
     
				width: 800px;
				height: 600px;
			}
		</style>
		<!-- 01 导入js -->
		<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=KHp5uI3NGByiMP20lWf2dEMCWUbYuS6c"></script>
	</head>
	<body>
		<!-- 准备容器 -->
		<div id="container"></div>
		<script>
			// 初始化地图
			var map = new BMapGL.Map("container")
			// 准备一个中心点（经度，纬度）
			var point = new BMapGL.Point(116.404, 39.915);
			// 设置中心点和缩放级别
			map.centerAndZoom(point, 15); 
			// 鼠标滚轮缩放
			map.enableScrollWheelZoom(true);
			
			// 不要去记忆，要去官网粘贴复制
		</script>
	</body>
</html>

ここに画像の説明を挿入

マップコントロールの場合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container{
     
     
				width: 800px;
				height: 600px;
			}
		</style>
		<!-- 01 导入js -->
		<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B"></script>
	</head>
	<body>
		<!-- 准备容器 -->
		<div id="container"></div>
		<script>
			// 初始化地图
			var map = new BMapGL.Map("container")
			// 准备一个中心点（经度，纬度）
			var point = new BMapGL.Point(116.404, 39.915);
			// 设置中心点和缩放级别
			map.centerAndZoom(point, 15); 
			// 鼠标滚轮缩放
			map.enableScrollWheelZoom(true);
			
			// 不要去记忆，要去官网粘贴复制
			var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
			map.addControl(scaleCtrl);
			var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
			map.addControl(zoomCtrl);
			var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
			map.addControl(cityCtrl);
		</script>
	</body>
</html>

ここに画像の説明を挿入
3. ポイントケースの追加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container{
     
     
				width: 800px;
				height: 600px;
			}
		</style>
		<!-- 01 导入js -->
		<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B"></script>
	</head>
	<body>
		<!-- 准备容器 -->
		<div id="container"></div>
		<script>
			// 初始化地图
			var map = new BMapGL.Map("container")
			// 准备一个中心点（经度，纬度）
			var point = new BMapGL.Point(113.665,34.784);
			// 设置中心点和缩放级别
			map.centerAndZoom(point, 15); 
			// 鼠标滚轮缩放
			map.enableScrollWheelZoom(true);
			
			// 添加一个点
			var marker =new BMapGL.Marker(point);
			// 添加覆盖物
			map.addOverlay(marker); 
			// 存储多个点
			var line = [];
			// 存储标记
			var markers = [];
			// 监听事件
			map.addEventListener("click",e=>{
     
     
				// 创建点
				var  p = new BMapGL.Point(e.latlng.lng,e.latlng.lat);
				// 创建标记
				var  m = new BMapGL.Marker(p);
				markers.push(m);
				// 添加标记
				map.addOverlay(m);
				// 存储点
				line.push(p);
			})
			map.addEventListener("dblclick",e=>{
     
     
				// 把第0个点放入到最后面
				line.push(line[0]);
				// 创建多边形先
				var polygone = new BMapGL.Polygon(line,{
     
     fillColor:"red",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5})
				// var polyline = new BMapGL.Polyline(line,{strokeStyle:"dashed",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
				// 添加线
				// map.addOverlay(polyline);
				 map.addOverlay(polygone);
				// 清空点的列表
				line = [];
				// stroke线，Color颜色，Weight粗细，OPacity透明度
				// 清空点
				markers.forEach(item=>map.removeOverlay(item));
				// 清空点
				markers = [];

			})
			
			var circle = new BMapGL.Circle(point,2000,{
     
     strokeColor:"green"});
			map.addOverlay(circle);
			
			 
		</script>
	</body>
</html>

ここに画像の説明を挿入

マークされたケースを追加する

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container{
     
     
				width: 800px;
				height: 600px;
			}
		</style>
		<!-- 01 导入js -->
		<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B"></script>
	</head>
	<body>
		<!-- 准备容器 -->
		<div id="container"></div>
		<script>
			// 初始化地图
			var map = new BMapGL.Map("container")
			// 准备一个中心点（经度，纬度）
			var point = new BMapGL.Point(113.665,34.784);
			// 设置中心点和缩放级别
			map.centerAndZoom(point, 15); 
			// 鼠标滚轮缩放
			map.enableScrollWheelZoom(true);
			
			// 添加一个点
			var marker =new BMapGL.Marker(point);
			// 添加覆盖物
			map.addOverlay(marker); 
			// 创建标签
			var label = new BMapGL.Label("中国前端学习基地", {
     
            // 创建文本标注
				position: point,                          // 设置标注的地理位置
				offset: new BMapGL.Size(0, 0)           // 设置标注的偏移量
			})  
			// 添加标签
			map.addOverlay(label);                        // 将标注添加到地图中
			// 设置标签的样式
			label.setStyle({
     
     
				fontSize:"32px",
				color:"red"
			})
			
			 
		</script>
	</body>
</html>

ここに画像の説明を挿入

インフォメーションウィンドウケース

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container{
     
     
				width: 800px;
				height: 600px;
			}
		</style>
		<!-- 01 导入js -->
		<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B&output=jsonp"></script>
	</head>
	<body>
		<!-- 准备容器 -->
		<div id="container"></div>
		<script>
			// 初始化地图
			var map = new BMapGL.Map("container")
			// 准备一个中心点（经度，纬度）
			var point = new BMapGL.Point(113.665,34.784);
			// 设置中心点和缩放级别
			map.centerAndZoom(point, 15); 
			// 鼠标滚轮缩放
			map.enableScrollWheelZoom(true);
			
			// 添加一个点
			var marker =new BMapGL.Marker(point);
			// 添加覆盖物
			map.addOverlay(marker); 
			
			var opts = {
     
     
			    width: 250,     // 信息窗口宽度
			    height: 200,    // 信息窗口高度
			    title: "学好前端，月薪过万"  // 信息窗口标题
			}
			// 信息窗口
			var infoWindow = new BMapGL.InfoWindow(`<p>前端很简单只有<strong>js</strong></p><img src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics6.baidu.com%2Ffeed%2F37d12f2eb9389b50d7a9ec85016fcad6e6116e7c.jpeg%40f_auto%3Ftoken%3Db6954495aabfec6648f5a7b29905e75e&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1667322000&t=622767397570980eb03b5acecd03756a" width="200">`, opts);  
			// 创建信息窗口对象
			map.openInfoWindow(infoWindow,point);        // 打开信息窗口
			//  map.getCenter() 获取到地图的中心位置
			
			marker.addEventListener("click",e=>{
     
     
				// 单击显示
				map.openInfoWindow(infoWindow,point);    
			})
			
			 
		</script>
	</body>
</html>

ここに画像の説明を挿入

検索機能の追加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container{
     
     
				width: 800px;
				height: 600px;
			}
		</style>
		<!-- 01 导入js -->
		<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B&output=jsonp"></script>
	</head>
	<body>
		<input type=""  value="" onchange="search(this)" />
		<!-- 准备容器 -->
		<div id="container"></div>
		<script>
			// 初始化地图
			var map = new BMapGL.Map("container")
			// 准备一个中心点（经度，纬度）
			var point = new BMapGL.Point(113.665,34.784);
			// 设置中心点和缩放级别
			map.centerAndZoom(point, 15); 
			// 鼠标滚轮缩放
			map.enableScrollWheelZoom(true);
			
			// 添加一个点
			var marker =new BMapGL.Marker(point);
			// 添加覆盖物
			map.addOverlay(marker); 
			// 创建一个本地搜索
			var local = new BMapGL.LocalSearch(map, {
     
     
					renderOptions:{
     
     map: map}
				});
			function search(e){
     
     
				// 表单值发生变化时候进行搜索
				local.search(e.value);
			}
			 
			
			 
		</script>
	</body>
</html>

ここに画像の説明を挿入
以上が百度地図に関する知識ポイントです歩数を積み重ねなければ、何千マイルにも到達できますこのブログを辛抱強く読んでいただけるということは、あなたは可能性を秘めた人材であるということですさらに詳しく知りたい方は、もっと公式文書を読むことをお勧めします。ここに画像の説明を挿入

Baidu Maps の使用に関する詳細なチュートリアル

1.百度地図の紹介

2. 百度地図の利用

1.百度地図の利用手順

2. コントロールを追加する

3. 地図上にコンテンツを描画します（オーバーレイ）

4. マップイベント

5.百度地図の検索機能

6. VueプロジェクトでBaiduマップを使用する方法

3. 百度地図の場合

おすすめ