由于Taro的局限性，导致Map组件只可在小程序使用，而在浏览器不能使用。

使用方法

小程序

<Map
    latitude={latitude}
    longitude={longitude}
 />

组件常用参数说明

• longitude：中心经度
• latitude：中心纬度
• scale： 缩放级别，取值范围为 3-20
• minScale：最小缩放级别
• maxScale： 最大缩放级别
• markers：标记点
• showCompass：显示指南针
• showScale：显示比例尺
• enableOverlooking：开启俯视
• enableZoom: 是否支持缩放
• enableScroll: 是否支持拖动
• enableRotate: 是否支持旋转
• setting: 配置项
• onTap：点击地图时触发

h5

通过高德地图sdk展示

• 首先需要在index.html中引入sdk文件

  <script src="https://webapi.amap.com/maps?v=2.0&key=你申请的key值"></script>

• 展示

import React, { Component } from 'react'
import { View } from '@tarojs/components'  
export default class Location extends Component {  
  componentDidMount() {  
    this.initMap()  
  }  
  
  initMap = () => {  
    var map = new AMap.Map('container', {  
        viewMode: '2D', //默认使用 2D 模式 '2D'：平面模式，'3D'：带有俯仰角的 [3D 模式]。
        resizeEnable: true,  
        zoom: 20, // 初始缩放级别  
        rotation： 0, // 旋转角度
        center: [116.286722, 39.858752] // 初始中心点坐标  
    });  
    const marker = new AMap.Marker({
        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        position: [116.286722, 39.858752],
        offset: new AMap.Pixel(-13, -30)
    });
    marker.setMap(map);
  }
  
  render() {  
    return (  
      <View id="container" style={{ width: '100%', height: '300px' }}></View>  
    )  
  }  
}

属性和方法文档链接在这里啦：

申请key操作流程：lbs.amap.com/api/javascr…

地图： lbs.amap.com/api/javascr…

标记点（marker）：lbs.amap.com/api/javascr…

通过腾讯地图sdk展示

• 在index.html中引入sdk文件

    <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=你申请的key"></script>

• 展示

import React, { Component } from 'react'
import { View } from '@tarojs/components'  
export default class Location extends Component {  
  componentDidMount() {  
    this.initMap()  
  }  
  
  initMap = () => {  
    // 初始化地图
    var center = new TMap.LatLng(39.858752, 116.286722);
    var map = new TMap.Map('container', {
      zoom: 17, // 设置地图缩放
      center: new TMap.LatLng(39.858752, 116.286722), // 设置地图中心点坐标，
      pitch: 0, // 俯仰度
      rotation: 0, // 旋转角度
    });

    // MultiMarker文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker
    var marker = new TMap.MultiMarker({
      map: map,
      styles: {
        // 点标记样式
        marker: new TMap.MarkerStyle({
          width: 20, // 样式宽
          height: 30, // 样式高
          anchor: { x: 10, y: 30 }, // 描点位置
        }),
      },
      geometries: [
        // 点标记数据数组
        {
          // 标记位置(纬度，经度，高度)
          position: center,
          id: 'marker',
        },
      ],
    });
  }
  
  render() {  
    return (  
      <View id="container" style={{ width: '100%', height: '300px' }}></View>  
    )  
  }  
}

属性和方法文档链接在这里啦：

申请key操作流程：lbs.qq.com/webApi/java…

地图： lbs.qq.com/webApi/java…

标记点（marker）：lbs.qq.com/webApi/java…

注：也可根据其他需要阅读文档中的其他属性和方法