Ionic使用百度地图弹窗并响应点击事件

// 1.首先在index.html中引入百度地图的URL（其中要有申请的KEY）
// <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

// 2.新建map组件，在ts文件中输入以下内容
ionViewWillEnter(){
    let map = new BMap.Map("allmap");// allmap是在html布局中定义的<div id="allmap"></div>
    let point = new BMap.Point(116.417, 39.921);// 初始化地图
    map.centerAndZoom(point, 15);// 初始化地图视图
}

// 3.在 map.centerAndZoom(point, 15) 的下一行继续添加以下内容
let marker = new BMap.Marker(point);// 初始化Marker对象
map.addOverlay(marker);// 将marker放置到地图上

// 4.在 map.addOverlay(marker) 的下一行继续添加以下内容
marker.addEventListener("click", function(){
    // TODO 做其他事情
});

// 5.在 map.addOverlay(marker) 和 marker.addEventListener 之间插入以下内容
let options = {
    width: 200,
    height: 100,
    title: "测试弹窗的标题"
}; // 定义弹出窗参数
let htm = '<div>内容：这是内容主体</div><div><button id="confirm" onclick="test()">确定</button></div>';
let infoWindow = new BMap.InfoWindow(htm, options); // 初始化弹出窗对象

// 6.在 TODO 下面继续添加以下内容
map.openInfoWindow(infoWindow, point); // 点击marker执行该行代码，弹出信息窗

// 7.在该ts文件中，添加test方法
test(){
    console.log("如果我再控制台中打印出来，说明弹窗中的button响应了，反之。");
}

let infoWindow = new BMap.InfoWindow('<div>内容：这是内容主体，啦啦啦</div><div><button id="confirm" onclick="this.test()">确定</button></div>', options); // 初始化弹出窗对象

// 以上完整代码
// 1.首先在index.html中引入百度地图的URL（其中要有申请的KEY）
// <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

// 2.新建map组件，在ts文件中输入以下内容
ionViewWillEnter(){
    let map = new BMap.Map("allmap");// allmap是在html布局中定义的<div id="allmap"></div>
    let point = new BMap.Point(116.417, 39.921);// 初始化地图
    map.centerAndZoom(point, 15);// 初始化地图视图
    
    // 3.在 map.centerAndZoom(point, 15) 的下一行继续添加以下内容
    let marker = new BMap.Marker(point);// 初始化Marker对象
    map.addOverlay(marker);// 将marker放置到地图上
    
    // 5.在 map.addOverlay(marker) 和 marker.addEventListener 之间插入以下内容
    let options = {
        width: 200,
        height: 100,
        title: "测试弹窗的标题"
    }; // 定义弹出窗参数
    let htm = '<div>内容：这是内容主体</div><div><button id="confirm">确定</button></div>';
    let infoWindow = new BMap.InfoWindow(htm, options); // 初始化弹出窗对象

    // 4.在 map.addOverlay(marker) 的下一行继续添加以下内容
    let that = this;
    marker.addEventListener("click", function(){
        // TODO 做其他事情
        // 绑定监听事件
        document.getElementById("confirm").onclick = that.test;
        map.openInfoWindow(infoWindow, point); // 点击marker执行该行代码，弹出信息窗
    });
}

// 7.在该ts文件中，添加test方法
test(){
    console.log("如果我再控制台中打印出来，说明弹窗中的button响应了，反之。");
}