百度

落日与鲸

2025-02-24 62bd05c5c2359466a538a7a2de5035d9cae62fb2

 H5/pages/location/location.vue

@@ -5,7 +5,7 @@
            <image src="/static/location/back.png" class="w-19 h-35" mode=""></image>
         </view>
      </u-navbar>
      <div id="baidu-map"></div>
      <div id="map-container"></div>

      <view class="">
         <view class="searchMain mb-35">
@@ -31,6 +31,16 @@
</template>

<script>
   function loadBaiduMapSDK() {
      return new Promise((resolve, reject) => {
         const script = document.createElement('script');
         script.src = 'https://api.map.baidu.com/api?v=3.0&ak=W3x8DhCWKc2UFIwYgclpRBdL6BeGLLQt';
         script.onload = resolve;
         script.onerror = reject;
         document.head.appendChild(script);
      });
   }

   export default {
      data() {
         return {
@@ -38,26 +48,25 @@
            longitude: 116.39742,
         };
      },
      mounted() {
         this.initMap();
      onLoad() {
         loadBaiduMapSDK()
            .then(() => {
               const map = new BMapGL.Map('map-container');
               // 其他初始化操作
            })
            .catch((error) => {
               console.error('百度地图 SDK 加载失败:', error);
            })
      },

      methods: {
         initMap() {
            // 创建地图实例
            const map = new BMapGL.Map('baidu-map');
            // 设置中心点坐标
            const point = new BMapGL.Point(116.404, 39.915);
            // 初始化地图，设置中心点和缩放级别
            map.centerAndZoom(point, 15);
            // 开启鼠标滚轮缩放
            map.enableScrollWheelZoom(true);
         }

      }
   }
</script>

<style lang="scss" scoped>
   #baidu-map {
   #map-container {
      width: 100vw;
      height: 517rpx;
   }