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>

<スタイルタイプ="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>

<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