uniapp地图是基于什么开发的-猿码集

1. 前言

在手机APP的开发过程中，地图功能是非常常见的功能之一，而uniapp作为一种多端开发技术，其地图功能是基于腾讯地图API进行开发的。本文将介绍uniapp地图的基本使用方法、地图组件以及地图API，旨在帮助大家了解uniapp地图的开发过程以及对地图进行常规操作。

2. uniapp地图的基本使用方法

2.1 添加地图组件

uniapp地图的实现需要在页面中添加地图组件，组件的添加方式如下所示:


<template>
  <view>
    <map :style="{ width: '100vw', height: '100vh' }" :longitude="longitude" :latitude="latitude" :markers='markers' :scale='scale'></map>
  </view>
<</template>
<script>
  export default {
    data() {
      return {
        // 经度
        longitude: 116.4965075,
        // 纬度
        latitude: 39.9037619,
        // 缩放比例
        scale: 14,
        // 标记点
        markers: [{
          id: 0,
          latitude: 39.9037619,
          longitude: 116.4965075,
          title: '地图标记点',
          zIndex: 1,
          callout: {
            content: '我是自定义标记点哦',
            color: '#fff',
            bgColor: '#000',
            padding: 5,
            borderRadius: 5,
            display: 'ALWAYS'
          },
          iconPath: '/static/icon.png',
          width: 30,
          height: 30
        }]
      }
    }
  }
</script>

添加地图组件所需传的参数包括style、longitude、latitude、markers、scale等，这些属性会在地图组件中进行渲染，从而呈现出一个地图。地图的相应的参数（即位置和缩放比例）可以通过data中的变量进行控制，增删标记点也可以随时进行。

2.2 展示地图

在添加地图组件后，只需调用uniapp下的showModal方法即可展示地图，代码如下：


export default {
  methods:{
    showModal(){
      uni.showModal({
        title: '地图',
        content: '展示地图', 
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定');
          } else {
            console.log('用户点击取消');
          }
        }
      });
    }
  },
  onLoad() {
    // 页面创建时执行
    this.showModal();
  }  
}

在成功显示模态框之后，即可看到uniapp地图的实时效果，展示的地图将自动默认显式设置的位置与缩放比例。

3. uniapp地图的组件

3.1 地图标记

uniapp地图允许在地图组件中添加地图标记，标记的添加需要可以通过下方代码中的markers属性实现，实例如下:


<map :longitude="longitude" :latitude="latitude" :markers='markers'></map>
export default {
  data() {
    return {
      markers: [{
        id: 0, // 数字
        latitude: 39.9037619, // 纬度
        longitude: 116.4965075, // 经度
        title: '地图标记点', // 标记点名称
        zIndex: 1, // 显示标记点的层级
        callout: {
          content: '我是自定义标记点哦',// 标记点的具体信息
          color: '#fff',// 标记点字体的颜色
          bgColor: '#000',// 标记点的背景颜色
          padding: 5,// 标记点的内边距
          borderRadius: 5,// 标记点的圆角半径
          display: 'ALWAYS'// 标记点的展示状态
        },
        iconPath: '/static/icon.png',// 图标路径
        width: 30,// 图标宽度
        height: 30// 图标高度
      }]
    }
  }
}

以上是添加地图标记的一个例子，这里需要注意的是，当我们增加多个标记点时，需要将它们包装在数组中传递给markers属性，同时，标记点的一些具体信息可以通过callout属性进行自定义，比如标记点名称、颜色、宽高等。

3.2 地图控件

uniapp地图的组件还包括地图控件，常见的地图控件有：缩放控件、移动控件、旋转控件等等。通过增加地图控件，我们可以实现对整个地图界面的操作控制，例如拖拽、放大、缩小、旋转等等。从而提高地图操作的便捷性。

uniapp提供了常见的地图控件，可以直接进行添加展示。其代码与实现方法如下：


<map :longitude="longitude" :latitude="latitude" :scale="scale" show-location="true" >
    <!--缩放控件-->
    <map-scale></map-scale>
    <!--控件位置调节器-->
    <map-control position="top-right">
      <button size="50rpx" style="background-color:#fff">
        T
      </button>
    </map-control>
</map>

在以上代码中，我们添加了地图控件，并将其展示在了左侧地图的上方。其中scale属性控制了地图的缩放比例，show-location属性则用于展示当前用户的位置。

4. uniapp地图API

随着科技的不断发展，许多互联网技术已经拥有了强大的API功能。uniapp地图也提供了多种API可供开发者们进行调用，开发者可以按照API的定义进行编程，从而实现地图的各种操作。

4.1 地图SDK

uniapp地图提供了一个基于JavaScript的腾讯地图SDK，它提供了丰富的API接口，包括定位、搜索、路线规划、工具接口等等。

具体地，在uniapp中使用地图API的步骤如下：

第一步：引入地图SDK。在uniapp的pages目录下，新建一个文件夹，可以命名为 ‘MapView’，在其中新建一个‘index.js’文件，添加如下代码：


const appkey = '你的key';
function loadScript() {
  return new Promise((resolve, reject) => {
    if (window.qq) {
      resolve();
      return;
    }
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = `https://map.qq.com/api/js?v=2.exp&libraries=drawing&key=${appkey}&callback=init`;
    script.onerror = reject;
    document.head.appendChild(script);
  })
}
export default {
  async initMap() {
    await loadScript();
  }
}

第二步：调用initMap()方法，将该方法写在需要调用函数的组件中：


import MapView from '../../MapView/index.js'
export default {
    mounted() { //执行一次
        MapView.initMap()
    }
}

4.2 地图功能的调用

在通过SDK引入地图之后，使用API调用地图功能非常简单。uniapp提供了一些常用的地图API，包括定位、搜索、路线规划等等。

4.2.1 定位API

定位API可以获取当前用户的位置，可用于地图组件中的参数传递。首先通过uniapp内置的方法获取当前用户所在的地理位置，然后将其传递到地图组件中，代码如下所示：


export default {
  data(){
    return {
       latitude: null,
       longitude: null
    }
  },
  methods:{
    getLocation(){
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          console.log('location---',res)
          this.latitude=res.latitude,
          this.longitude=res.longitude
        }
      });
    }
  },
  onLoad() {
    // 页面创建时执行
    this.getLocation()
  }
}
<map :longitude="longitude" :latitude="latitude"></map>

在上面代码中，getLocation()方法用于获取用户当前的位置，获取当前位置后latitude和longitude会自动动态赋值为用户当前所处的位置坐标。实现上述代码后，即可实现在uniapp地图上显示自己的实时位置。

4.2.2 搜索API

在地图中搜索一个特定的地点通过搜索API进行实现。需要使用到搜索API返回的值中的“位置信息”（即该地点的经度与纬度），然后将其传递给地图组件的markers属性进行标记显示。示例代码如下：


export default {
    data() {
        return {
            searchVal: '银泰城',
            markers: [],
            longitude: 116.3325,
            latitude: 40.016,
            scale: 14,
            tags: []
        }
    },
    methods: {
        async search() {
            const res = await uni.getLocation();
            console.log(res);
            let { longitude, latitude } = res;
            const { status, message } = await uni.getLocationAuthorization();
            console.log(status, message + 'message');
            if (status == 'denied') {
                await uni.showModal({
                    title: message,
                    content: '需要获取当前位置'
                });
                await uni.openSetting({
                    success: () => {
                        this.getLocation().then(({ longitude, latitude }) => {
                            this.latitude = latitude;
                            this.longitude = longitude;
                        });
                    }
                })
            } else {
                await uni.delay(2000);
                let endPoint = longitude + ',' + latitude;
                let { data } = await uni.request({
                    url: `https://apis.map.qq.com/ws/place/v1/search?keyword=${this.searchVal}&boundary=nearby(${latitude},${longitude},1000)&key=${this.key}`,
                });
                console.log(data);
                this.markers = data.map((item, index) => {
                    item.icon = {
                        path: '/static/images/greenflag.png'
                    }
                    item.id = index + 1;
                    item.latitude = item.location.lat;
                    item.longitude = item.location.lng;
                    return item
                });
                this.scale = 15;
                this.latitude = data[0].location.lat;
                this.longitude = data[0].location.lng;
            }
        }
    }
}
<map :style="{height:'${this.clientHeight}px'}" :longitude="longitude" :latitude="latitude" :scale="scale" :markers="markers" :include-points="true"></map>

在搜索API中，我们首先通过uni.getLocation()获取用户所在的位置，再通过请求接口，获得名称与位置信息，最后修改markers属性实现标记点的展示。

5. 程序总结

到这里，我们已经了解 uniapp 地图的基础用法、组件以及常用的API的应用，并且通过代码的实现对其细节进行了一番介绍。通过本文的学习，相信大家已经可以掌握 uniapp地图的基本使用方法，实现展示地图、设置标记点、自定义标记点等操作。在实际开发中，应根据实际需求，灵活使用 uniapp 地图的各项功能。

文章结束

uniapp地图是基于什么开发的