国际化项目

遇到国际化的项目,需要我们引入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地图的调用是要钱的,先有试用金后续注意一下即可,钱这部分由产品负责

03-05 20:20