國內“Google 地圖 API”使用教程

https://www.fujieace.com/jingyan/google-map-api.html

最近有客戶要求給他們網站做地圖方面的功能，由於某些原因，網站必須使用google map，而且希望用到geocoding。大家知道google map api調用國內已經訪問不了，雖然網上有很多教程，什么替換ip啊，把maps.google.com改成maps.google.cn。但其實這些方法都是掉了牙的，早就已經不管用了。

 

今天我把我的google map api安裝、配置、使用方法分享出來。

 

一、申請google map api接口

首先，我們需要申請Geocoding api和google map api。你得有一個google帳號，訪問 google map api console，根據自己需求來申請相關的api。我申請的比較多。

Places API

Maps JavaScript API

Time Zone API

Geocoding API

Maps Static API

 

你們可以根據各自需求來申請。也可以訪問www.pjcourse.com看最后的應用效果。

 

申請“google map api”這個比較簡單，具體操作步驟如下：

1、新建項目

2、搜索相應api，申請

3、轉到api和服務這一塊，創建憑據。這些憑據就是api key，也用來限制api的具體應用范圍。

 

4、最后需要做結算。現在結算是免費試用階段，申請的話，只要有一張信用卡就可以，因為已經沒有了中國地區的選項，所以地址選擇香港。會扣除8港元，信用卡驗證通過之后會退回。這么一來，所以的申請算結束了。

 

二、配置子域名

我用的是cloudflare，所以直接在上面新開兩個子域名，maps.example.com，mapsapis.example.com 。這里example替換成你自己的域名就可以。

 

配置ssl，我用的是let's encrypt，自動90天就會續簽的。

sudo apt install certbot python3-certbot-nginx sudo certbot --nginx -d example.com -d www.example.com sudo systemctl status certbot.timer

輸出結果如下，就說明自動續簽正常。

certbot.timer - Run certbot twice daily

Loaded: loaded (/lib/systemd/system/certbot.timer; enabled; vendor preset: enabled)

Active: active (waiting) since Mon 2020-05-04 20:04:36 UTC; 2 weeks 1 days ago

Trigger: Thu 2020-05-21 05:22:32 UTC; 9h left

Triggers:

certbot.service

 

三、安裝必要的模塊

我的配置環境是ubuntu 20.04 + nginx。

 

1、安裝replace-filter-nginx-module模塊

第一步：安裝之前，首先需要安裝sregex

git clone https://github.com/agentzh/sregexcd sregex/ make make install

 

第二步：下載replace-filter-nginx-module

git clone https://github.com/agentzh/replace-filter-nginx-module nginx -V

這里用到nginx -V。主要是把nginx的模塊全部顯示出來，等會需要重新編譯。

 

完整命令：

wget https://nginx.org/download/nginx-1.18.0.tar.gz tar xvf nginx-1.18.0.tar.gz cd nginx-1.18.0/ ./configure --with-cc-opt='-g -O2 -fdebug-prefix-map=/build/nginx-5J5hor/nginx-1.18.0=. -fstack-protector-strong -Wformat -Werror=format-security -fPIC -Wdate-time -D_FORTIFY_SOURCE=2' --with-ld-opt='-Wl,-Bsymbolic-functions -Wl,-z,relro -Wl,-z,now -fPIC' --prefix=/usr/share/nginx --conf-path=/etc/nginx/nginx.conf --http-log-path=/var/log/nginx/access.log --error-log-path=/var/log/nginx/error.log --lock-path=/var/lock/nginx.lock --pid-path=/run/nginx.pid --modules-path=/usr/lib/nginx/modules --http-client-body-temp-path=/var/lib/nginx/body --http-fastcgi-temp-path=/var/lib/nginx/fastcgi --http-proxy-temp-path=/var/lib/nginx/proxy --http-scgi-temp-path=/var/lib/nginx/scgi --http-uwsgi-temp-path=/var/lib/nginx/uwsgi --with-debug --with-compat --with-pcre-jit --with-http_ssl_module --with-http_stub_status_module --with-http_realip_module --with-http_auth_request_module --with-http_v2_module --with-http_dav_module --with-http_slice_module --with-threads --with-http_addition_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_image_filter_module=dynamic --with-http_sub_module --with-http_xslt_module=dynamic --with-stream=dynamic --with-stream_ssl_module --with-mail=dynamic --with-mail_ssl_module --add-module=/root/replace-filter-nginx-module make

這里注意一下，--add-module=/root/replace-filter-nginx-module。需要添加進去。其它的配置選項，參考你們自己的nginx -V參數結果。

 

一般重新編譯的時候，都會有一堆報錯。這主要是和你的模塊配置參數有關，你只要把相應的模塊安裝上就可以。比如我遇到以下這些：

pcre

sudo apt-get install libpcre3 libpcre3-dev

gd lib

apt install libgd-dev

openssl

sudo apt-get install libssl-dev

 

第三步：最后，把nginx做個備份，再替換掉。

cp /usr/sbin/nginx /usr/sbin/nginx.bak cp ./objs/nginx /usr/sbin/

 

四、配置nginx

在/etc/nginx/sites-enabled目錄下，新建一個配置maps.example.com.conf。

server { #default_server;# default_server; server_name maps.example.com mapsapis.example.com; location /maps/ { default_type text/javascript; proxy_set_header Accept-Encoding ''; proxy_pass https://maps.googleapis.com/maps/; replace_filter_max_buffered_size 500k; replace_filter_last_modified keep; replace_filter_types text/javascript application/javascript; replace_filter maps.googleapis.com mapsapis.example.com ig; } location /maps-api-v3/ { proxy_pass https://maps.googleapis.com/maps-api-v3/; } listen [::]:443 ssl http2; listen 443 ssl http2; ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certb }

 

至此，所有的配置已經完成。測試了一下，直接通過訪問自己的子域名，就可以調用maps.googleapis.com的地圖接口了。