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

2019/11/08 15:40
阅读数 1.7K

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

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

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

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部