jsは百度地図を呼び出し、百度地図検索関数を呼び出します

ホームページ

ウェブフロントエンド

jsチュートリアル

jsは百度地図を呼び出し、百度地図検索関数を呼び出します_javascriptスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:40 PM

百度地図百度地図API

Baidu マップを呼び出す JS メソッド

コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Hello, World</title>
 <style type="text/css">
  html
  {
   height: 100%;
  }
  body
  {
   height: 50%;
   margin: 0px;
   padding: 0px;
  }
  #container
  {
   width:600px;
   height: 500px;
  }
 </style>
 <script type="text/javascript" src="http://api.map.baidu.com/api&#63;v=1.3"></script>
</head>
<body onload="loand()">
 <div id="container">
 </div>
 <input id="lng" type="hidden" runat="server" />
 <input id="lat" type="hidden" runat="server" />
 <input id="Button1" type="button" value="标记图标" runat="server" onclick="getbiaoji()" />
 <script type="text/javascript">
  function getbiaoji() {
   var lng = document.getElementByIdx_x("lng").value;
   var lat = document.getElementByIdx_x("lat").value;
   var map = new BMap.Map("container");
   var point = new BMap.Point(lng, lat);
   var marker = new BMap.Marker(point);
   var opts = {
    width: 250,  // 信息窗口宽度 
    height: 100,  // 信息窗口高度 
    title: "经销商地址" // 信息窗口标题 
   }
   var infoWindow = new BMap.InfoWindow("移动拖拽 标记经销商地址:" + lng + lat, opts); // 创建信息窗口对象
   marker.enableDragging(); //启用拖拽
   map.addControl(new BMap.NavigationControl()); //左上角控件
   map.enableScrollWheelZoom(); //滚动放大
   map.enableKeyboard(); //键盘放大
   map.centerAndZoom(point, 13); //绘制地图
   map.addOverlay(marker); //标记地图
   map.openInfoWindow(infoWindow, map.getCenter());
  }
  function loand() {
   var map = new BMap.Map("container");
   var point = new BMap.Point(104.083, 30.686); //默认中心点
   var marker = new BMap.Marker(point);
   var opts = {
    width: 250,  // 信息窗口宽度 
    height: 100,  // 信息窗口高度 
    title: "经销商地址" // 信息窗口标题 
   }
   var infoWindow = new BMap.InfoWindow("移动拖拽 标记经销商地址", opts); // 创建信息窗口对象
   marker.enableDragging(); //启用拖拽
   marker.addEventListener("dragend", function (e) {
    point = new BMap.Point(e.point.lng, e.point.lat); //标记坐标（拖拽以后的坐标）
    marker = new BMap.Marker(point);
    document.getElementByIdx_x("lng").value = e.point.lng;
    document.getElementByIdx_x("lat").value = e.point.lat;
    infoWindow = new BMap.InfoWindow("当前位置<br />经度：" + e.point.lng + "<br />纬度：" + e.point.lat, opts);
    map.openInfoWindow(infoWindow, point);
   })
   map.addControl(new BMap.NavigationControl()); //左上角控件
   map.enableScrollWheelZoom(); //滚动放大
   map.enableKeyboard(); //键盘放大
   map.centerAndZoom(point, 13); //绘制地图
   map.addOverlay(marker); //标记地图
   map.openInfoWindow(infoWindow, map.getCenter());  // 打开信息窗口  
  }
 </script>
</body>
</html>

ログイン後にコピー

js は Baidu 地図検索を呼び出します

Baidu js Api の引用

<script type="text/javascript" src="http://api.map.baidu.com/api&#63;v=2.0&ak=xxxxxxxxxxxx"></script>

ログイン後にコピー

ジオコーダーの作成:

var localSearch = null;
//查询参数
var options = {
   //智能搜索
   onSearchComplete: function (results) {
    //查询结果状态码
    if (localSearch.getStatus() == BMAP_STATUS_SUCCESS) {
     var s = convertMapSearch(results); //对结果进行处理
     model.locationAddress(s); //将结果数据赋予knockout对象数组（可用其他数组对象代替）
    }
   }
  };
  localSearch = new BMap.LocalSearch("城市", options);

ログイン後にコピー

ノックアウトの textInput バインディングメソッドとオブジェクトの submit 属性を組み合わせて、入力ボックスの変更に対するリアルタイムのクエリ機能を実現します。

//绑定
<input id="txtAddress" type="text" placeholder="请输入用餐地址" data-bind="textInput: addressInput" />
//subscribe属性 在输入变化的时候执行地址查询
sf.addressInput.subscribe(function (val) {
   var addr = $.trim(val);
   if (addr == "") {
    return;
   }
   localSearch.search(addr);
  });

ログイン後にコピー

上記は、Baidu マップを呼び出し、Baidu マップの検索機能を呼び出すために共有された Script House の JS エディタです。このサイトには新しいコンテンツはありません。このサイトで更新します。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7480

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

百度地図でのタクシー料金の支払い方法. タクシー料金の支払い手順を紹介します。 Mar 13, 2024 am 10:04 AM

Baidu Map APP は現在、多くのユーザーに好まれる旅行ナビゲーションソフトウェアとなっているため、ここにある機能の一部は包括的であり、毎日の旅行で遭遇する可能性のある問題のいくつかを解決するために無料で選択して操作できます。自分だけの旅行ルートを設定して、自分だけの旅行プランを立てましょう。該当するルートを確認した上で、公共交通機関を利用しても、自転車、徒歩、タクシーなど、目的に応じて適切な移動方法を選択することができます。あなたのニーズに対応したナビゲーションルートがあり、特定の場所にうまく導くことができます。そうすれば、誰もがタクシーを利用することを選択した場合、より便利だと感じるでしょう。多くのドライバーがいます。彼らは皆、オンラインで注文を受け付け、タクシー配車は可能です。超になる

百度地図に新しい場所を追加する方法 Mar 20, 2024 pm 01:46 PM

Baidu Maps に新しい場所を追加する場合は、いくつかの複雑な手順を実行する必要がある場合があります。でも心配しないでください。次に、Baidu Maps に新しい場所を追加して、位置情報を共有したり、他の人が目的地を見つけたりするのを簡単にする方法を詳しく説明します。百度地図に新しい場所を追加する方法 1. まず百度地図アプリを開いてメインページに入ります; 2. 次に、以下に示すようにメインページに入り、右側の [レポート] ボタンをクリックします; 3. 次に、レポート機能ページで、以下の [場所の追加] サービスを選択します; 4. 次に、場所の追加エリアの [その他の情報] ボックスに情報を入力します; 5. 最後に、対応する情報を入力し、下部の [送信] をクリックして完了します。

「百度地図」でのタクシー料金の支払い方法 Mar 26, 2024 pm 09:20 PM

日常の移動ではタクシーを利用することがよくありますが、百度地図では便利で早いタクシーサービスも提供しています。しかし、百度地図でタクシーに乗った後、支払い方法がわからない人はまだたくさんいます。ここでは、百度地図でのタクシー料金の支払い方法を詳しく紹介していきます。百度地図でのタクシー料金の支払い方法 1. まず百度地図アプリを開いてメインページに入ります; 2. 次に、下の図に示すページにジャンプし、右側の[タクシー]をクリックします; 3. その後、タクシーに乗ります下の図の機能ページで [パーソナルセンター] を選択します; 4. 次に、パーソナルセンターページで [支払い管理] を見つけます; 5. 最後に、支払い管理機能ページで、有効にする支払い方法を選択し、[ [アクティブ化] に進みます。

Baidu Maps 3D 現実地図の表示方法 Feb 23, 2024 pm 12:52 PM

Baidu Maps には 3D 現実地図機能がありますが、3D 現実地図を表示するにはどうすればよいですか? ユーザーは、[マイ] でその他のオプションを見つけ、その中で 3D 地図を見つけて地図を表示する必要があります。現実の 3D 地図を表示する方法の紹介では、その設定方法について説明します。以下に詳しく紹介しますので、ご覧ください。 Baidu Map の使い方チュートリアル Baidu Map の 3D 現実地図を表示する方法回答: My-More-3D Map に移動します具体的な方法: モバイル版: 1. まず、右下の My をクリックします。 2. 内部でさらに多くの機能を見つけます。 3. 3D 現実シーンをクリックして使用します。 Web バージョン: 1. まず、Web バージョンに入るには https://map.baidu.com と入力する必要があります。 2. 右下隅にある「メソッドの表示」をクリックします。

Baidu Maps の車線レベルのナビゲーションは全国 200 都市をカバーし、運転体験を向上させます Feb 03, 2024 pm 03:05 PM

Baidu Maps は最近、全国の 200 以上の都市をカバーする真の都市車線レベルのナビゲーションシステムの立ち上げに成功したと発表しました。このシステムの導入により、ドライバーのナビゲーション体験が大幅に向上しました。 Baidu Maps の車線レベルのナビゲーションは、拡大画像のみを提供する以前のナビゲーション方法と比較して、より没入型の 3 次元インターフェイスを提供します。このシステムは、信号機、車線分割線、バス専用レーンなど、現実世界の道路の詳細を細かく復元することで、ドライバーが現在の道路状況をより明確に理解できるようにします。この種の車線レベルのナビゲーションは、ドライバーがより正確に車線を選択できるだけでなく、より包括的な交通情報を提供し、運転プロセスをより安全かつ便利にします。この目標を達成するために、百度地図は業界初の大規模地図生成モデルを独自に開発したことがわかる。

百度地図で 3D リアルタイムストリートビューを表示する方法 3D リアルタイムストリートビューを表示する方法 Mar 28, 2024 pm 03:20 PM

Baidu Map Navigation モバイル版の無料ダウンロードは、非常に専門的なモバイルマップナビゲーションソフトウェアです。ソフトウェアのナビゲーション機能は非常に強力です。行きたい限り、最も正確な旅行プランを見つけることができます。どこに行くにも非常に便利です。あなたが行きたいです。同時に、他のナビゲーション機能も使用できます。さまざまな有名人のボイスパックを無料でダウンロードして使用できます。オンラインでさまざまなナビゲーションモードを使用して、みんなの旅行の安全を守ります。また、スキャンすることもできますバスにもっと便利に乗るためのコードです。必須の旅行ナビゲーションアシスタントです。道に迷う心配はありません。編集者が百度地図パートナーにオンラインで 3D リアルタイムストリートビューを表示する方法を注意深く紹介します。 1. Baidu Maps を開き、共通機能バーの [詳細] をクリックします 2. 次に、検索して 3D 現実のシーンを見つけます 3. 次に、3D 表示インターフェイスに入ります 4. など

百度地図で複数の場所をマークする方法複数の場所をマークする方法 Mar 15, 2024 pm 04:28 PM

上記には、特に複数の場所をマークできる地図の場合に多くの関数があります。いくつかの場所がわかったら、さまざまな側面を提供できるように、必ずいくつかの句読点関数を使用します。マークする関数の中には、距離を生成するものもあります。もちろん、上記の場所の名前や詳細情報も表示されますが、多くのネチズンは上記の内容に精通していない可能性があります。コンテンツ情報は表示されません。非常に明確なので、皆さんがさまざまな側面でより良い選択をできるように、今日は編集者がさまざまな側面でいくつかの選択肢を提供しますので、アイデアに興味のある友人、あなたも興味がある場合は、試しに来てください。標準

JS と Baidu Maps を使用してマップパン機能を実装する方法 Nov 21, 2023 am 10:00 AM

JS と Baidu Map を使用してマップパン機能を実装する方法 Baidu Map は広く使用されている地図サービスプラットフォームで、Web 開発で地理情報、位置情報、その他の機能を表示するためによく使用されます。この記事では、JS と Baidu Map API を使用してマップパン機能を実装する方法と、具体的なコード例を紹介します。 1. 準備 Baidu Map API を使用する前に、Baidu Map Open Platform (http://lbsyun.baidu.com/) で開発者アカウントを申請し、アプリケーションを作成する必要があります。作成完了

See all articles

jsは百度地図を呼び出し、百度地図検索関数を呼び出します_javascriptスキル

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック