uni-app 希望将内置地图与h5地图区分开来

在uni-app项目中，根据平台的不同（如小程序、App、H5等）使用不同的地图组件是一种常见的需求。为了实现内置地图（如在App和小程序中）与H5地图的区分，我们可以利用条件编译和平台判断来实现。

以下是一个简单的示例，展示了如何在uni-app中根据平台不同选择不同的地图组件。

1. 在App和小程序中使用内置地图组件

在pages/index/index.vue文件中，我们可以使用uni-app提供的<map>组件，这个组件在App和小程序环境下会调用各自平台的内置地图。

<template>
  <view>
    <!-- #ifdef APP-PLUS || MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO || MP-BAIDU || MP-QQ -->
    <map
      id="map"
      longitude="116.397428"
      latitude="39.90923"
      scale="14"
      markers="{{markers}}"
      style="width: 100%; height: 300px;"
    ></map>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      markers: [{
        id: 1,
        latitude: 39.90923,
        longitude: 116.397428,
        title: '北京'
      }]
    };
  }
};
</script>

2. 在H5中使用第三方地图（如高德地图）

在H5环境下，我们可以引入第三方地图库，比如高德地图的JavaScript API。这需要在H5特有的代码块中实现。

<template>
  <view>
    <!-- #ifndef APP-PLUS && #ifndef MP-* -->
    <div id="container" style="width: 100%; height: 300px;"></div>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  mounted() {
    // #ifndef APP-PLUS && #ifndef MP-*
    if (typeof window !== 'undefined') {
      const AMap = window.AMap;
      const map = new AMap.Map('container', {
        zoom: 14,
        center: [116.397428, 39.90923]
      });
      AMap.plugin('AMap.Marker', () => {
        const marker = new AMap.Marker({
          position: new AMap.LngLat(116.397428, 39.90923),
          title: '北京'
        });
        map.add(marker);
      });
    }
    // #endif
  }
};
</script>

注意事项

1. 条件编译：uni-app提供了条件编译指令（如#ifdef、#ifndef、#endif），用于区分不同平台的代码。
2. 平台判断：在JavaScript中，可以通过process.env.PLATFORM或typeof window等来判断当前运行环境。
3. API Key：在使用第三方地图服务时，请确保你已经获取了相应的API Key，并在项目中正确配置。

通过上述方法，我们可以在uni-app项目中实现内置地图与H5地图的区分。