【百度 JavaScript API v3.0】InfoWindow 信息窗

信息窗

需求

点击

技术点

官网地址： JavaScript API - 快速入门 | 百度地图API SDK

开发文档：百度地图JSAPI 3.0类参考

实现

第一步：在public的index.html中引入

<script src="http://api.map.baidu.com/api?v=3.0&ak=ak值" type="text/javascript"></script>

第二步：组件中使用

<template>
  <div>
    <div id="map"></div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      map: null,
	  point: null,
    };
  },
  mounted() {
    let that = this
    this.map = new BMap.Map("map");
    this.point = new BMap.Point(116.8414, 39.925)
    this.map.centerAndZoom(this.point, 17);
    this.map.enableScrollWheelZoom();
    
    // marker点
    var marker = new BMap.Marker(this.point);
    marker.text = 123
    this.map.addOverlay(marker); 
    
    // marker点击事件
    marker.addEventListener("click",function(){
      that.openInfo(marker);
    }); 
  },
  methods: {
    openInfo(marker){

      // 当前位置
      var p = marker.getPosition();
      var point = new BMap.Point(p.lng,p.lat);

      // 显示内容
      var text = marker.text
      var content = `<p>${text}</p>`

      // 样式参数
      var opt = {
        width: 100,
        height: 50,
        title:'详情'
      }

      this.map.openInfoWindow(new BMap.InfoWindow(content,opt), point);
    },
  }
}
</script>

<style lang="less">
#map {
  width: 300px;
  height: 300px;
}
</style>

解析

r的返回值：

r.getStatus()的状态码

BMAP_STATUS_SUCCESS                                检索成功。对应数值“0”。

BMAP_STATUS_CITY_LIST                                城市列表。对应数值“1”。

BMAP_STATUS_UNKNOWN_LOCATION           位置结果未知。对应数值“2”。 BMAP_STATUS_UNKNOWN_ROUTE                导航结果未知。对应数值“3”。 BMAP_STATUS_INVALID_KEY                           非法密钥。对应数值“4”。 BMAP_STATUS_INVALID_REQUEST                 非法请求。对应数值“5”。 BMAP_STATUS_PERMISSION_DENIED            没有权限。对应数值“6”。(自 1.1 新增) BMAP_STATUS_SERVICE_UNAVAILABLE         服务不可用。对应数值“7”。(自 1.1 新增) BMAP_STATUS_TIMEOUT                                   超时。对应数值“8”。(自 1.1 新增)