反应原生的Google Map Javascript API

时间:2015-10-21 10:16:13

标签: google-maps-api-3 react-native

是否可以使用javascript api而不完全依赖于浏览器DOM来渲染地图,因为反应本机使用View我觉得可以以某种方式使用api,通过传递使api可用的方法使用fetch也可以使用全局窗口,但我不知道如何启动回调。如果有人知道这是如何工作的,请分享一些想法

<script async defer
     src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

2 个答案:

答案 0 :(得分:3)

提到的googlemaps节点模块@sunilp只为您提供静态地图,这些地图很容易构建而不依赖于lib,只需搜索google maps api静态地图(没有足够的声誉来发布两个以上的链接)。

对于Android,你有这个: https://github.com/teamrota/react-native-gmaps

对于iOS就是这样,但它警告说这是一项正在进行的工作(它还没有在几个月内更新):https://github.com/peterprokop/ReactNativeGoogleMaps

环顾四周,看来你今天最好的(支持的)赌注是如果你搜索他们的文档就使用React Native自己的MapView。然后,您可以对Google Maps API服务进行数据提取调用,然后通过其界面填充MapView。确保您传入密钥并在网址中使用https,否则服务将拒绝您的电话:

fetch(
    'https://maps.googleapis.com/maps/api/directions/json?origin=41.13694,-73.359778&destination=41.13546,-73.35997&mode=driver&sensor=true&key=[YOUR_KEY]'
)
.then(
    (response) => response.text()
)
.then(
    (responseText) => {
        console.log(responseText);
    }
)
.catch(
    (error) => {
        console.warn(error);
    }
);
`

答案 1 :(得分:1)

使用渲染的节点方法,尚未尝试,但看起来可以使用node-googlemaps

npm install googlemaps

用法

var GoogleMapsAPI = require('googlemaps');

var publicConfig = {
key: '<YOUR-KEY>',
stagger_time:       1000, // for elevationPath
encode_polylines:   false,
secure:             true, // use https
proxy:              'http://127.0.0.1:9999' // optional, set a proxy      for HTTP requests
};
var gmAPI = new GoogleMapsAPI(publicConfig);

您可以参考https://github.com/moshen/node-googlemaps