ウェブページに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
ストレージエンジンデータベース ストレージ エンジンとは何ですか?データベース エンジンは、データベ...
1. テーブルステートメントを作成します。 テーブル「従業員」を作成します( `emp_no` in...
Nginxをインストールするまずcentosイメージをプルしますdocker pull centos...
同僚から、MySQL データ型 DECIMAL(N,M) の N と M の意味を尋ねられました。言...
カルーセルとは何ですか?カルーセル: モジュールまたはウィンドウで、コンピューターでマウスをクリック...
序文:前回の記事では、注意深い学生であれば発見できたかもしれない DDL ステートメントの使用法を中...
ページを作成するときに、ページの見栄えを良くするために、背景画像を設定する必要があることがよくありま...
1. テストテーブルを作成する テーブル `mysql_genarate` を作成します ( `id...
【歴史的背景】私は 3 年間 MySQL-DBA として働いてきましたが、MySQL が「基本的に利...
Bash 初期化ファイル対話型ログインシェル次の場合にはログイン シェルを取得できます。ローカル端末...
アプリケーションシナリオバックグラウンド管理システムを例にとると、各ユーザーには異なるボタン権限があ...
MySQLはユーザーを作成し、ユーザーの権限を承認および取り消します動作環境: MySQL 5.0...
今日、新しい技を学びました。あまりやったことがなかったので、今まで知りませんでした...目的: リン...
閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...
この記事では主に、v-if と v-for を一緒に使用することが推奨されない理由を紹介します。詳細...