我可以将原生 GoogleMap 添加到我的 Cordova 混合应用程序吗？
Posted
技术标签:
【中文标题】我可以将原生 GoogleMap 添加到我的 Cordova 混合应用程序吗？【英文标题】：Can I add a native GoogleMap to my Cordova hybrid app? 【发布时间】：2015-07-15 05:20:44 【问题描述】：我可以将原生谷歌地图添加到我的科尔多瓦混合应用程序中的一个页面吗？
如果是，请说明如何（在 android 和 ios 中），谢谢！
【问题讨论】：
是的，你可以，只需搜索谷歌地图插件 是不是一定要cordova build它然后打开原生应用工程手动添加原生google地图代码？
不，您只需使用 cordova CLI 安装插件，一切都会正常运行（如果您找到的插件已更新为支持 cordova 3.X.X）。
【参考方案1】：
是的，您可以使用 googlemaps api for cordova，这是一个简单的实现。 在此之前，您需要从 google 生成您的 api 密钥。 请在此链接中找到信息 https://developers.google.com/maps/documentation/javascript/get-api-key
这是一个使用您的 api 密钥加载地图的简单示例。 https://developers.google.com/maps/documentation/javascript/examples/map-simple
在你在 head 部分的 meta 标签中添加白名单之后，让你的 index.html 看起来像这样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://maps.googleapis.com/ https://maps.gstatic.com/ https://mts0.googleapis.com/ 'unsafe-inline' 'unsafe-eval'">
<style>
body, html, #map margin: 0;width:100%;height:400px
#map
position: relative;
width:400px;
height: :50%;
#map:after
width: 22px;
height: 40px;
display: block;
content: ' ';
position: absolute;
top: 50%; left: 50%;
margin: -40px 0 0 -11px;
background-size: 22px 40px;
pointer-events: none;
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
function initialize()
var mapOptions =
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeId: google.maps.MapTypeId.ROADMAP
;
map = new google.maps.Map(document.getElementById('map'), mapOptions);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
【讨论】：
【参考方案2】：请查看 googlmap 原生插件：
https://github.com/mapsplugin/cordova-plugin-googlemaps
【讨论】：
以上是关于我可以将原生 GoogleMap 添加到我的 Cordova 混合应用程序吗？的主要内容，如果未能解决你的问题，请参考以下文章
googleMap.getMyLocation();无法获取当前位置
GoogleMap.getMyLocation() 返回 null
如何将自定义按钮添加到 react-google-maps？