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>
国内想要使用谷歌地图,需要将经纬度反向编码,在通过后台返回
国内,如下
国外如下(需要fq或者开vpn才可以访问)
https://maps.googleapis.com/maps/api/geocode/json?address=北京天安门&key=AIzaSyB9W2V3_GT8_tKfO-PA6kT2_eeW35yUgv8
是例子