npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-michael-amap

v1.0.7

Published

react-native 高德地图组件,支持 Android + iOS

Downloads

12

Readme

react-native-michael-amap npm version build status

react-native 高德地图组件,使用最新 3D SDK,支持 Android + iOS,受 react-native-maps 启发,提供功能丰富且易用的接口。

相关项目推荐:

功能

  • 地图模式切换(常规、卫星、导航、夜间)
  • 3D 建筑、路况、室内地图
  • 内置地图控件的显示隐藏(指南针、比例尺、定位按钮、缩放按钮)
  • 手势交互控制(平移、缩放、旋转、倾斜)
  • 中心坐标、缩放级别、倾斜度的设置,支持动画过渡
  • 地图事件(onPress、onLongPress、onLocation、onStatusChange)
  • 地图标记(Marker)
    • 自定义信息窗体
    • 自定义图标
  • 折线绘制(Polyline)
  • 多边形绘制(Polygon)
  • 圆形绘制(Circle)
  • 热力图(HeatMap)
  • 海量点(MultiPoint)
  • 离线地图

安装

安装依赖

npm i react-native-michael-amap

项目配置

Android

react-native link react-native-michael-amap

iOS

你需要使用 CocoaPods,在 ios 目录下新建文件 Podfile

platform :ios, '9.0'

# The target name is most likely the name of your project.
target 'Your Target' do
  # Your 'node_modules' directory is probably in the root of your project,
  # but if not, adjust the `:path` accordingly
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # Include this for RN >= 0.47
    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # needed for debugging
    # Add any other subspecs you want to use in your project
  ]
  # Explicitly include Yoga if you are using RN >= 0.42.0
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  # Third party deps podspec link
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

  pod 'react-native-michael-amap', path: '../node_modules/react-native-michael-amap/lib/ios'
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"
      target.remove_from_project
    end
  end
end

注意:不同的 RN 版本,Podfile 可能需要稍作调整,具体参考 https://facebook.github.io/react-native/docs/integration-with-existing-apps#configuring-cocoapods-dependencies 。

然后运行:

pod install

添加高德 Key

Android

  1. 获取高德 Key

  2. 编辑 Android 项目的 AndroidManifest.xml(一般在 android\app\src\main\AndroidManifest.xml),添加如下代码:

    <application>
      <meta-data
        android:name="com.amap.api.v2.apikey"
        android:value="你的高德 Key" />
    </application>

iOS

  1. 获取高德 Key

  2. AppDelegate.m 里引入 SDK 头文件 #import <AMapFoundationKit/AMapFoundationKit.h>, 并设置高德 Key [AMapServices sharedServices].apiKey = @"你的高德 Key";

用法

导入地图模块

import { MapView } from 'react-native-michael-amap'

基本用法

<MapView
  coordinate={{
    latitude: 39.91095,
    longitude: 116.37296,
  }}
/>

启用定位并监听定位事件

<MapView
  locationEnabled
  onLocation={({ nativeEvent }) =>
    console.log(`${nativeEvent.latitude}, ${nativeEvent.longitude}`)}
/>

添加可拖拽的地图标记

<MapView>
  <MapView.Marker
    draggable
    title='这是一个可拖拽的标记'
    onDragEnd={({ nativeEvent }) =>
      console.log(`${nativeEvent.latitude}, ${nativeEvent.longitude}`)}
    coordinate={{
      latitude: 39.91095,
      longitude: 116.37296,
    }}
  />
</MapView>

自定义标记图片及信息窗体

const coordinate = {
  latitude: 39.706901,
  longitude: 116.397972,
}

<MapView.Marker image='flag' coordinate={coordinate}>
  <View style={styles.customInfoWindow}>
    <Text>自定义信息窗体</Text>
  </View>
</MapView.Marker>

更多示例

参考 examples,或直接下载安装 example.apk

Android

yarn run-android

iOS

cd ios && pod install && cd ..
yarn run-ios

接口

请参考注释文档:

常见问题

  • 该项目不打算做数据接口,地理/逆地理编码、路径规划、搜索等功能请使用 Web 服务
  • 尽量使用设备进行测试,在模拟器可能存在一些问题(常见的是 Android 模拟器因为缺少硬件加速而导致闪退)。