使用react在百度地圖中新增座標點,點選時彈出氣泡框展示資料
阿新 • • 發佈:2021-01-10
技術標籤:react
建立標記點並繫結點選事件
//建立標記點
//point 自定義座標
var marker = new BMap.Marker(point,"標記點" ,{offset: new BMap.Size(10, -10)});
//標記點點選事件
marker.addEventListener("click", this.showInfo);
map.addOverlay(marker);
點選時執行
showInfo = (e) => { let p = e.target; let point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); //context是一個字串,內容可以自己定義 let context = '<table border="1" cellpadding="0" cellspacing="0" width="200px" style="text-align: center;">' + '<tr><th>aaa</th><th>bbb</th></tr>' + '<tr><td>111</td><td>111</td></tr>'+ '</table>'; let opts = { width: 200, // 資訊視窗寬度 height: 60, // 資訊視窗高度 enableMessage: true//設定允許資訊窗傳送短息 } let infoWindow = new BMap.InfoWindow(context, opts); map.openInfoWindow(infoWindow, point); // 開啟資訊視窗 }