如何项目中加入google地图

国际化项目

遇到国际化的项目，需要我们引入google地图。由下面一步一步指导：

• 首先，我们要能打开google网页，这一步的解决可有找公司IT部门配置或者自己有方法去登录google
• 能够登上google，我们需要一个账号，账号的创建是要绑定国际卡如visa卡等的，找产品给弄到一个账号登录
• 登录完成之后，我们直接搜索google云平台，因为谷歌地图已经纳入云平台里面了，登录云平台即可

账号我们已经拿到并且已经登录了云平台，下面我们开始创建项目：

1. 找到my project项目管理，然后点击创建
2. 然后我们去搜索Google Maps Platform，进入配置项
3. 刚开始所有的有关地图的API调用默认是关闭的，后面可以根据我们的实际需要去启用，这里我们可以去开启其中一个试一下
   在配置项API中我们可以看到启用和未启用的地图api
4. 最重要的一步，我们要去配置获取地图调用的key了，在凭据项点击创建API密钥，然后可以在页面上看到你的API密钥（键）了，这个就是我们调用地图的一切

拿到了key，我们就可以在项目中引入，这时候我们就需要google地图文档按需引入，根据项目所需要呈现功能引入我们要的函数调用方法：

• 文档的地址是

  https://developers.google.com/maps/documentation/javascript/examples/

  前端的话看的一定是examples，因为是直观的JavaScript语言，有图有代码
  因为文档是纯英文的，英语差一点的可以带个划词翻译辅助自己

其他

地图我们引入了，后续我们可能要用到根据IP地位，通过IP判断是国内客户还是国际客户，如是国际客户按需加载google的地图API相应功能：

• 我们判断IP的方法用GeoIP，也是国外一个免费的调用，网址是

  https://dev.maxmind.com/geoip/geolocate-an-ip/client-side-javascript

• 我们调用的ip方法是geoip2.country(onSuccess, onError, options)，这个函数能拿到定位的ip，根据文档里的方法我们在开发阶段可以实践

如果该项目后续发到线上去了，需要我们去配置一些东西才能让该方法生效：

• 首先我们要在该网站先注册账号

  https://www.maxmind.com/en/geolite2/signup

• 然后登录上去进行配置

  https://www.maxmind.com/en/accounts/610517/geoip/javascript/domains

  在对应的位置配置完成成功后大概等个10~20分钟在线网址即可生效

以上即引入google地图的一些实践之后的见解，其中文档大部分是英文，google地图的调用是要钱的，先有试用金后续注意一下即可，钱这部分由产品负责