Baidu Maps を Web ページに埋め込み、Baidu Maps API を使用してマップをカスタマイズする詳細な手順

Baidu Maps を Web ページに埋め込み、Baidu Maps API を使用してマップをカスタマイズする詳細な手順

ウェブページにBaiduマップを挿入する

Baidu Maps を自分の Web ページに追加したい場合は、Baidu Maps API を使用できます。具体的な使用方法は次のとおりです。

ステップ 1: Baidu のマップ作成 Web サイト http://api.map.baidu.com/lbsapi/creatmap/ にアクセスし、下の図に示すように、表示する場所を検索します。

ステップ 2: マップを設定します。Web サイトに表示されるマップの幅と高さを設定し、他のオプションは変更せずにそのままにしておきます。

ステップ 3: 注釈を追加します。最初のアイコンをクリックした後、右側で自分の位置を見つけ、マウスの左ボタンをクリックしてその位置を特定します。マークアイコンの形状を変更したり、名前やメモに場所に関する情報を記入したりすることができます。

ステップ 4: コードを取得します。コードを Web ページに貼り付けるだけです。コードは次のとおりです。


コードをコピー
コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312" />
<meta name="keywords" content="Baidu Map、Baidu Map API、Baidu Map カスタマイズ ツール、Baidu Map WYSIWYG ツール" />
<meta name="description" content="Baidu Map API カスタムマップは、ユーザーが視覚的な操作で Baidu マップを生成するのに役立ちます" />
<title>Baidu Map API カスタムマップ</title>
<!--Baidu Map API より引用-->
<スタイル タイプ="text/css">
html、本文{マージン:0;パディング:0;}
.iw_poi_title {color:#CC5522;フォントサイズ:14px;フォントの太さ:太字;オーバーフロー:非表示;右パディング:13px;空白:ラップなし}
.iw_poi_content {フォント:12px arial、sans-serif;オーバーフロー:可視;上部パディング:4px;空白:-moz-pre-wrap;単語折り返し:break-word}
</スタイル>
<script type="text/javascript" src="<a href="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script">http://api.map.baidu.com/api?key=&v=1.1&services=true"></script</a>>
</head></p> <p><body>
<!--Baidu マップ コンテナー-->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</本文>
<script type="text/javascript">
//マップ関数を作成して初期化します。
関数initMap(){
createMap(); //マップを作成する
setMapEvent(); //マップイベントを設定する
addMapControl(); //マップにコントロールを追加する
}

//マップ関数を作成します:
関数createMap(){
var map = new BMap.Map("dituContent"); // Baidu マップ コンテナーにマップを作成する
var point = new BMap.Point(113.116257,27.822879); //中心点の座標を定義する
map.centerAndZoom(point,17); //マップの中心点と座標を設定し、マップコンテナにマップを表示します
window.map = map; //マップ変数をグローバルに保存する
}

//マップイベント設定関数:
関数setMapEvent(){
map.enableDragging(); //マップのドラッグ イベントを有効にします。デフォルトで有効になっています (オプション)
map.enableScrollWheelZoom(); //マップのスクロールホイールを有効にしてズームインとズームアウトする
map.enableDoubleClickZoom(); //マウスのダブルクリックによるズームを有効にする。デフォルトで有効(オプション)
map.enableKeyboard(); //キーボードの上下左右のキーを有効にして地図を移動します
}

//マップコントロール追加関数:
関数addMapControl(){
//マップにズームコントロールを追加する
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
マップにコントロールを追加します(ctrl_nav);
//マップにサムネイルコントロールを追加する
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//マップにスケールコントロールを追加する
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
マップにコントロールを追加します(ctrl_sca);
}
initMap(); //マップを作成して初期化する
</スクリプト>
</html>

<<:  VMware IOInsight を使用して、仮想マシンのストレージ パフォーマンスの監視を改良する

>>:  フォント宝庫 50 種類の素晴らしい無料英語フォントリソース パート 1

推薦する

MySql ストレージ エンジンとインデックスに関する知識のまとめ

ストレージエンジンデータベース ストレージ エンジンとは何ですか?データベース エンジンは、データベ...

クエリでのMySQLのユニークキーの使用と関連する問題

1. テーブルステートメントを作成します。 テーブル「従業員」を作成します( `emp_no` in...

Docker は Python Flask+ nginx+uwsgi コンテナを構築します

Nginxをインストールするまずcentosイメージをプルしますdocker pull centos...

MySQL データ型 DECIMAL(N,M) における N と M の意味の詳細な説明

同僚から、MySQL データ型 DECIMAL(N,M) の N と M の意味を尋ねられました。言...

シンプルなカルーセル効果を実現するJavaScript

カルーセルとは何ですか?カルーセル: モジュールまたはウィンドウで、コンピューターでマウスをクリック...

MySQL DMLステートメントの使用に関する詳細な説明

序文:前回の記事では、注意深い学生であれば発見できたかもしれない DDL ステートメントの使用法を中...

CSSで背景ぼかしを設定する方法

ページを作成するときに、ページの見栄えを良くするために、背景画像を設定する必要があることがよくありま...

MySQLループは数千万のデータを挿入する

1. テストテーブルを作成する テーブル `mysql_genarate` を作成します ( `id...

MySQL の WriteSet 並列レプリケーションの簡単な分析

【歴史的背景】私は 3 年間 MySQL-DBA として働いてきましたが、MySQL が「基本的に利...

bashの初期化メカニズムの詳細な説明

Bash 初期化ファイル対話型ログインシェル次の場合にはログイン シェルを取得できます。ローカル端末...

ボタンの権限判定を実装するためのVueカスタムv-has命令

アプリケーションシナリオバックグラウンド管理システムを例にとると、各ユーザーには異なるボタン権限があ...

リンクをクリックしたときにファイルのダウンロードダイアログボックスをポップアップ表示するには、HTML で href を使用します。

今日、新しい技を学びました。あまりやったことがなかったので、今まで知りませんでした...目的: リン...

nginx をシャットダウン/再起動/起動する方法

閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...

Vue で v-if と v-for を一緒に使用することが推奨されない理由の詳細な説明

この記事では主に、v-if と v-for を一緒に使用することが推奨されない理由を紹介します。詳細...