Question

我公司在市场上有两种不同的产品，每种产品我们都有一个经销商网络。我想在我们的网站上，在一个页面上显示这些内容，使用两个不同的嵌入式Google地图，每个网络一个。

这是Google允许我使用的“简单商店定位器”： https://developers.google.com/maps/solutions/store-locator/simple-store-locator

它使用以下文件：

stores.json
app.js
的index.php

当我只需要一张地图时，一切正常。但是为了添加第二张地图，我将这些文件分成：

storesC.json
storesH.json
appC.js
appH.js
的index.php

在index.php中，我然后两次调用google maps api，即使使用不同的api键。（使用相同的密钥也不起作用）。我这样做是通过复制代码两次并调用正确的app.js和initMap回调。

<div class="map"></div>
<script src="../js/appC.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAW5fPIkrJGwxh-KL8Co7zuJye0A04cX3pk&callback=initMapC"></script>

和

<div class="map"></div>
<script src="../js/appH.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAW5fPIkrJGwxh-KL8Co7zuJye0A04cX3pk&callback=initMapH"></script>

在appC.js和appH.js中我重命名了一些函数和变量：

const map - ＆gt; const mapC 和 const mapH
const mapStyle - ＆gt; const mapStyleC 和 const mapStyleH
function initMap - ＆gt; 函数initMapC 和函数initMapH
等...

无论我如何分离函数和变量，页面都不会同时加载两个映射。有时只有第一个，有时只有第二个。

顺便说一句：Chrome开发者控制台显示一个错误：“您已多次包含Google Maps API”。

我无法在互联网上找到任何有同样问题的人。我是世界上唯一一个试图在一个网页上显示两个商店定位器的人吗？

Answer 1

请勿使用2个密钥调用API。您只需要一个（并且API抱怨：const checkBoxField=({label,keyboardType,name}) => { return( <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}> <Text style={{alignSelf:'center',textAlign:'center'}}>{label}</Text> <CheckBox title='Male' checkedIcon='dot-circle-o' uncheckedIcon='circle-o' checked={true} containerStyle={{backgroundColor:'transparent'}} /> </View> ) }）。

在（一）回调函数中初始化两个映射。

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

相关问题：Google Maps API: Heatmap & Search - Cannot merge into single map

在一个网页

1 个答案: