小哥我最近使用谷歌地图做了一个项目，于是乎各种坑就扑面而来，未免下次接着踩坑特留下自己的爬坑记录。
首先我是没用过谷歌地图也不知道靠谱不靠谱，于是乎傻傻的入坑了，
1.首先你要是没有vpn（或者fq工具）那可能就寸步难行，赶快申请一个吧，用坚果或者蓝*都可以（如果没有，地图压根就不显示）
2.调用谷歌地图逆编码接口(你会发现你直接放在浏览器上打开，数据显示都挺好，可是自己用接口怎么调用都不行，恭喜你踩了第二个坑)如下：
谷歌官方API： https://maps.google.com/maps/api/geocode/json?address=New York&sensor=true_or_false&key=谷歌的key（浏览器直接打开没毛病啊，但是接口你怎么都掉不通，不信你试试）
国内API：https://ditu.google.cn/maps/api/geocode/json?address=New York&key=谷歌的key;(小伙子，你没看错这个接口让后台直接调用，然后把数据返还给你就行，我的用的是php，代码图片给你放出来，仅供参考，如需php代码可联系我，算了还是别联系我了，我代码也放下边吧)
如果（后台兄弟不配合，那兄弟晚上出去吃个烧烤也许就解决了，一顿不行来两顿），如果还不行，小伙子我也帮不了你了。。。。。
php代码如下：
$ipAll = $this->input->get('ipAll');
// $result ="";
// $url = 'http://api.map.baidu.com/geocoding/v3/?address='.$ipAll.'&output=json&ak=X7UHQqYy3WobTXHk3Mw3oN96ahHcQuuG&callback=showLocation';
// $abc= file_get_contents($url);
$prepAddr = str_replace(' ','+',$ipAll);
$url = 'https://ditu.google.cn/maps/api/geocode/json?address='.$prepAddr.'&key=AIzaSyB9W2V3_GT8_tKfO-PA6kT2_eeW35yUgv8';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);
curl_close($ch);
return $this->json($output, $this::SUCCESS, $message = $this->lang->line('text_resp_success'));
上面扯淡完了，下面就到了前端的了，这里呢我想说没有还是需要蓝灯和坚果的支援，主要是访问的时候，
1.生成vue文件就不说了，同时需要安装谷歌地图使用vue2-google-maps
vue2-google-maps 官网地址（https://www.npmjs.com/package/vue2-google-maps）
npm install vue2-google-maps
然后在min.js中引入
import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_TOKEN',
libraries: 'places', // This is required if you use the Autocomplete plugin
// OR: libraries: 'places,drawing'
// OR: libraries: 'places,drawing,visualization'
// (as you require)
//// If you want to set the version, you can do so:
// v: '3.26',
},
//// If you intend to programmatically custom event listener code
//// (e.g. `this.$refs.gmap.$on('zoom_changed', someFunc)`)
//// instead of going through Vue templates (e.g. `<GmapMap @zoom_changed="someFunc">`)
//// you might need to turn this on.
// autobindAllEvents: false,
//// If you want to manually install components, e.g.
//// import {GmapMarker} from 'vue2-google-maps/src/components/marker'
//// Vue.component('GmapMarker', GmapMarker)
//// then disable the following:
// installComponents: true,
})
下面就是地图的代码了，别着急（如下完整代码，我想你可能想偷懒于是乎我git上给你留了一份，但是需要你在min.js中放入自己申请的谷歌地图的key地址如下：）
<template>
<div>
<gmap-map
:center="centers"
:zoom="11"
map-type-id="terrain"
style="width: 100%; height: 340px"
>
<gmap-marker
@dragend="updateMaker"
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
@click="centers=m.position"
></gmap-marker>
<!-- @click="centers=m.position" -->
</gmap-map>
</div>
</template>
<script>
export default {
data() {
return {
centers: {lat: 39.90419989999999,lng: 116.4073963},
markers: [{
position: {lat: 39.90419989999999,lng: 116.4073963}
}],
place: null,
}
},
description: 'Autocomplete Example (#164)',
mounted() {
},
methods: {
setPlace(place) {
this.place = place
},
setDescription(description) {
this.description = description;
},
usePlace(place) {
if (this.place) {
var newPostion = {
lat: this.place.geometry.location.lat(),
lng: this.place.geometry.location.lng(),
};
this.center = newPostion;
this.markers[0].position = newPostion;
this.place = null;
}
},
updateMaker: function(event) {
console.log('updateMaker, ', event.latLng.lat());
this.markers[0].position = {
lat: event.latLng.lat(),
lng: event.latLng.lng(),
}
},
}
}
</script>
国内想要使用谷歌地图，需要将经纬度反向编码，在通过后台返回
国内，如下
国外如下（需要fq或者开vpn才可以访问）
https://maps.googleapis.com/maps/api/geocode/json?address=北京天安门&key=AIzaSyB9W2V3_GT8_tKfO-PA6kT2_eeW35yUgv8
是例子