vue输出打印出当前经纬度_vue如何实现输入行政名称输出坐标

vue输出打印出当前经纬度

我的思路当然还是去地图的api上看看
我调用的高德地图api
高德地图api链接: link.https://lbs.amap.com/api/javascript-api/reference/location

来人，上代码~

// 高德地图api
created(){
        var that = this;
         AMap.plugin("AMap.CitySearch", function() {
                var citySearch = new AMap.CitySearch();
                citySearch.getLocalCity(function(status, result) {
                    if (status === "complete" && result.info === "OK") {
                        // 查询成功，result即为当前所在城市信息
                        console.log("通过ip获取当前城市：", result);
                        console.log("经纬度" + result.bounds.Gb.lat);
                        that.lat = result.bounds.Gb.lat;
                        that.lng = result.bounds.Gb.lat;
                    }
                });
            });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

腾讯地图api链接: link.https://lbs.qq.com/tool/component-geolocation.html

1.vue实现安装腾讯地图指令是：
npm install weixin-js-sdk --save

2.然后main.js引入

import wxsdk from 'weixin-js-sdk';

Vue.use(wxsdk);
1
2
3

3.index.js写入（替换自己的key）

<iframe id="geoPage" width=0 height=0 frameborder=0  style="display:none;" scrolling="no"
    src="https://apis.map.qq.com/tools/geolocation?key=your key&referer=myapp">
</iframe>
1
2
3

4.然后就可以引入使用了

window.addEventListener('message', function(event) {
    // 接收位置信息
    var loc = event.data;
    console.log('location', loc);
}, false);
1
2
3
4
5