vue中vue2-google-maps使用谷歌地图的基础操作

小哥我最近使用谷歌地图做了一个项目，于是乎各种坑就扑面而来，未免下次接着踩坑特留下自己的爬坑记录。

首先我是没用过谷歌地图也不知道靠谱不靠谱，于是乎傻傻的入坑了，

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>

国内想要使用谷歌地图，需要将经纬度反向编码，在通过后台返回

国内，如下

https://ditu.google.cn/maps/api/geocode/json?address=%E5%8C%97%E4%BA%AC%E5%A4%A9%E5%AE%89%E9%97%A8&key=AIzaSyB9W2V3_GT8_tKfO-PA6kT2_eeW35yUgv8

国外如下（需要fq或者开vpn才可以访问）

https://maps.googleapis.com/maps/api/geocode/json?address=北京天安门&key=AIzaSyB9W2V3_GT8_tKfO-PA6kT2_eeW35yUgv8

是例子

https://blog.csdn.net/cc_1209/article/details/89416936