javascript Baidu Map の開発
1. コンテンツを完成させ、さまざまな業種 (A、B、C、D、E) に応じてさまざまなアイコンをマークします (完了)
2. クリックします。クリックすると、タイトル、イエタイ、および markArr 配列内のその他のコンテンツがそれぞれポップアップ表示されます。現在、マーカー ポイントのコンテンツをポップアップ表示できますが、それは常に markerArr 配列内の最後のデータになります。マーカーポイントをクリックした後、対応するマーカーポイント配列情報をポップアップ表示しますか?
ご指導をお願いいたします。よろしくお願いいたします。
うわー
九日2020-05-18 14:17:24
<!doctype html><head> <メタ文字セット="UTF-8"> <meta name="ビューポート" content="width=device-width, user-scalable=no,Initial-scale=1.0, minimum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA 互換" content="ie=edge"> <title>百度地図</title> <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak="></script> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style></head><body> <div id="allmap"></div>＆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() {}</script></html>
Storms2020-05-14 11:24:57
どの注釈をクリックしても、最後の情報が出力されます。これは主に範囲の問題です。
クロージャを使用して解決します:
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;
経度、緯度、表示情報を別の関数に記述し、新しいマークの後にすぐにモニタリングを追加します。