百度地図のJavaScript開発

Question

Baidu Map の JavaScript 開発 1. コンテンツを完成させ、さまざまなビジネス タイプ (A、B、C、D、E) に応じてさまざまなアイコンをマークします (完了) 2. マーク ポイントをクリックして、それぞれ markArr 配列内のタイトルをポップアップ表示します。 Yetai およびその他のコンテンツは現在ポップアップできます マーカー ポイントのコンテンツは常に markerArr 配列の最後のデータです。マーカー ポイントをクリックすると、対応するマーカー ポイント配列情報がポップアップ表示されます。ご指導をお願いいたします、よろしくお願いいたします。 <!DOCTYPE html>&n

九日 · Answer

<メタ文字セット="UTF-8"> 百度地図

＆lt;/body＆gt;＆lt;スクリプト言語= "javascript"＆gt; var markerarr = [;、tel： "010-888888888"、Yetai： "y"}、{title： "name：supermarket fa（shuangyushu store）" 、ポイント: "116.331637,39.973424"、住所: "北京市海淀区双玉樹西里路 7 号北三環路西"、電話: "010-62640346"、イエタイ:"A" }、{ title: "名前: スーパーマーケット (科学城店)"、地点: "116.324596,39.986931"、住所: "海淀区中関村南路 77 号"、電話: "010-62551377"、yetai:"B" }, {タイトル：「名前：スーパーマーケットファ（威公村店）」、ポイント：「116.326296,39.960478」、住所：「住所：北京上林01、2階、海淀区威公村街1号、電話：010-88570042」、yetai:"C" }、{ title: "名前: スーパーマーケット Fa (白宜路店)"、point: " 116.33458,39.951854 "、address:" 住所: 中国気象局南区第 22 号ビル、北京市海淀区 "、電話:" 010-589955553 "、イェタイ:" d "}、{title:" 名前: スーパーマーケットセンド (上堤店)"、ポイント: "116.318805,40.03683"、住所: "住所: いいえ. 上堤情報路19-3", tel: "010-62971745", Yetai:"E" }, { title: "名前 : スーパーマーケット (xxxx 店)", point: "116.318805,40.03620", address: "いいえ、北京市海淀区北三環西路」、電話：「010-62640346」、イエタイ：「A」}, | map.centerAndZoom(new BMapGL.Point(116.333405,39.974042), 13); //マップを初期化し、中心点の座標とマップレベルを設定します。map.enableScrollWheelZoom(true); //マウスホイールズームを有効にする //カスタマイズされたビジネスアイコン画像のアドレスとサイズ var zIcon = new BMapGL.Icon('images/z.png',new BMapGL.Size(30,30)); //スーパーマーケット本社オフィスビル var aIcon = new BMapGL.Icon('images/a .png ',new BMapGL.Size(30,30)); //総合スーパーマーケット var bIcon = new BMapGL.Icon('images/b.png',new BMapGL.Size(30,30)); //食品スーパーマーケットvar cIcon = new BMapGL.Icon('images/c.png',new BMapGL.Size(30,30)); //ライフスタイルスーパーマーケット var dIcon = new BMapGL.Icon('images/d.png',new BMapGL. Size( 30,30)); //生鮮食品スーパー var eIcon = new BMapGL.Icon('images/e.png',new BMapGL.Size(30,30)); //コミュニティスーパー var fIcon = new BMapGL. Icon( 'images/f.png',new BMapGL.Size(30,30)); //ワイフディアン var lIcon = new BMapGL.Icon('images/l.png',new BMapGL.Size(30,30)) ; //スーパーマーケット Faluosen*** var hIcon = new BMapGL.Icon('images/h.png',new BMapGL.Size(30,30)); //協同組合店舗 var gIcon = new BMapGL.Icon('images/ g.png',new BMapGL.Size(30,30)); //Cish*** var iIcon = new BMapGL.Icon('images/i.png',new BMapGL.Size(30,30)) ; / /防災用品 //保管場所の緯度経度 array var point = new Array(); var point = new Array(); var marker = new Array(); //保管場所プロンプト情報ウィンドウオブジェクト array var info = new Array(); // 情報ウィンドウがメッセージを送信できるように設定します var opts = {height:100,width:200}; // サークル出力は、Markerrar 配列の配列を出力します for (var I = 0; I & LT; Markerrr.Length; I) {var P0 = Markerrrr [i] .split (',') [0]; VAR P1 = Markerrr [ i].point.split(',')[1]; // console.log(windowinfo); point[i] = new window.BMapGL.Point(p0,p1); console.log(point[ i]) ; Marker[i] = new window.BMapGL.Marker(point[i]); // console.log(marker[i]); // 業務状況判定スイッチ(markArr[ i].yetai) { case "A": マーカー[i] = new window.BMapGL.Marker(point[i],{icon:aIcon}); Break; = new window.BMapGL.Marker(point[ i], {icon:bIcon}); ブレーク; ブレーク; case "D": マーカー i] = new window.BMapGL.Marker(point[i],{icon:dIcon}); }); ブレーク; case "l": マーカー[i] = 新しい window.BMapGL .Marker(point[i],{icon:lIcon});壊す; case "h": マーカー[i] = new window.BMapGL.Marker(point[i],{icon:hIcon});壊す; case "g": マーカー[i] = new window.BMapGL.Marker(point[i],{icon:gIcon});壊す; case "i": マーカー[i] = new window.BMapGL.Marker(point[i],{icon:iIcon});壊す;デフォルト: マーカー[i] = new window.BMapGL.Marker(point[i],{icon:zIcon}); } マーカー[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳躍的アニメ画 var content=markerArr[i].title; var infoWindow = 新しい BMapGL.InfoWindow(content,opts); marker[i].addEventListener("click", (function (k) { // js闭包 return function () { //map.centerAndZoom( point[k], 18); //mark[k].openInfoWindow( info[k]); console.log(marker); this.openInfoWindow(infoWindow, marker[i]); //开启情報窗口 } })(i) ); map.addOverlay(マーカー[i]); } }関数 info_window() {}

Storms · Answer

どの注釈をクリックしても、最後の情報が出力されます。これは主に範囲の問題です。

クロージャを使用して解決します:

var createMark = function(lng, lat, info_html) {

var _marker = new BMap.Marker(new BMap.Point(lng, lat));

_marker.addEventListener("click", function(e) {

this.openInfoWindow(new BMap.InfoWindow(info_html));

}) ;

_marker.addEventListener("マウスオーバー", function(e) { this.setTitle("at: " lng "," lat);

});

return _marker;

経度、緯度、表示情報を別の関数に記述し、新しいマークの後にすぐにモニタリングを追加します。

九日 · Answer

アドバイスをください。誰も知りません。

九日 · Answer

アドバイスをお願いします。とても感謝しています。ありがとうございます。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル