1. 程式人生 > 其它 >使用react在百度地圖中新增座標點,點選時彈出氣泡框展示資料

使用react在百度地圖中新增座標點,點選時彈出氣泡框展示資料

技術標籤: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); // 開啟資訊視窗
    }

在這裡插入圖片描述