uniapp中map地图定位的使用

uniapp中map地图定位的使用

有时h5为了实现类似外卖系统的地图定位，如下图所示

代码如下

<template>
  <view>
    <view class="page-body">
      <view class="page-section page-section-gap">
        <map
          style="width: 100vw; height: 100vh"
          :latitude="latitude"
          :longitude="longitude"
          :markers="covers"
          :polyline='polyline'
          :circles='circles'
          :controls='controls'
        >
        </map>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      id: 0, // 使用 marker点击事件 需要填写id
      title: "map",
      latitude: 34.75975, //设置地图中心的经纬度
      longitude: 113.664839, //设置地图中心的经纬度
      covers: [
        {
          callout: {
            borderRadius: 10,
            padding: 10,
            bgColor: "#CDDFF3",
            color: "#f00",
            fontSize: 10,
            content: `北京市`,
          }, //设置点击后显示的文字及其样式
          label: {
            content: "商家", //文本内容
            color: "black", //文本颜色
            bgColor: "#fff", //文本背景色
            fontSize: 10, //文本字体大小
            x: -20, //label的坐标，原点是 marker 对应的经纬度
            y: 30, //label的坐标，原点是 marker 对应的经纬度
            borderWidth: 12, //边框宽度
            borderColor: "pink", //边框颜色
            borderRadius: 20, //边框圆角
            bgColor: "black", //背景色
            padding: 5, //文本边缘留白
            textAlign: "right", //文本对齐方式。
          }, //设置地点旁边的文字及样式
          latitude: 34.75967,
          longitude: 113.664847,
          iconPath: "../../static/img/tabsListTemplate/fire.png",
          width: 20, //控件宽
          height: 20, //控件高
        },
        {
          latitude: 34.75874,
          longitude: 113.664838,
          iconPath: "../../static/img/tabsListTemplate/fire.png",
        },
      ],
      circles: [
        {
          //在地图上显示圆
          latitude: 34.75874,
          longitude: 113.664838,
          fillColor: "#999999", //填充颜色
          color: "#0016ca", //描边的颜色
          radius: 20, //半径
          strokeWidth: 1, //描边的宽度
        },
      ],
      polyline: [
        {
          //指定一系列坐标点，从数组第一项连线至最后一项
          points: [
            { latitude: 34.75874, longitude: 113.664838 },
            { latitude: 34.75967, longitude: 113.664847 },
          ],
          color: "#0000AA", //线的颜色
          width: 2, //线的宽度
          dottedLine: true, //是否虚线
          arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
        },
      ],
      controls: [
        {
          //在地图上显示控件，控件不随着地图移动
          id: 1, //控件id
          iconPath: "../../static/img/tabsListTemplate/fire.png",
          position: {
            //控件在地图的位置
            left: 15,
            top: 15,
            width: 50,
            height: 50,
          },
        },
      ],
    };
  },

  mounted() {},

  methods: {},
};
</script>
<style lang='less' scoped>
</style>