uniapp h5 高德地图基本的使用（给点标记绑定事件，信息窗体的使用

<template>
  <view class="container">
    <view class="map" id="map"></view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      map: null,
      marker: null
    };
  },
  onReady() {
    this.initMap();
    this.addMarker();
  },
  methods: {
    initMap() {
      this.map = new AMap.Map('map', {
        zoom: 11,
        center: [116.397428, 39.90923] // 设置中心点坐标
      });
    },
    addMarker() {
      this.marker = new AMap.Marker({
        map: this.map,
        position: this.map.getCenter() // 位置设置为地图中心点
      });
 
      // 点标记添加点击事件
      AMap.event.addListener(this.marker, 'click', () => {
        // 创建信息窗体
        const infoWindow = new AMap.InfoWindow({
          content: '这里是点击位置',
          size: new AMap.Size(200, 0),  // 信息窗口大小
          offset: new AMap.Pixel(0, -30) // 信息窗口偏移位置
        });
        infoWindow.open(this.map, this.marker.getPosition());
      });
    }
  }
};
</script>
 
<style>
.map {
  width: 100%;
  height: 300px;
}
</style>

这段代码展示了如何在uniapp中使用高德地图的基本用法。首先，在页面的<template>部分定义了一个用于显示地图的容器。在<script>部分，定义了一个methods对象，其中包含初始化地图和添加点标记的方法。在页面加载完成后（onReady生命周期钩子中），初始化地图，并在地图上添加一个点标记。点标记绑定了一个点击事件，当点标记被点击时，会打开一个信息窗体，显示点击的位置信息。