首页 > 其他 > 详细

vue 中根据地址名称获取实际经纬度方法

时间:2019-06-18 16:39:53      阅读:1490      评论:0      收藏:0      [点我收藏+]
<div id="container"
class="map"
style="margin-top:30px; width: 1200px;height:300px;border: 1px solid #f4d3ba;"></div>
<div id="containers" style="display: none"></div>
<script>
export default {
    validate ({ params }) {
        return /^\d+$/.test(params.id)
    },
    head () {
        return {
            script: [
                {src: ‘http://webapi.amap.com/maps?v=1.3&key=6e7239cd1f1aaf595bca3753a67986f8‘},
                {src: ‘http://libs.baidu.com/jquery/2.1.4/jquery.min.js‘}
                // {src: ‘https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js‘},
                // {src: ‘https://webapi.amap.com/maps?v=1.4.14&key=6e7239cd1f1aaf595bca3753a67986f8&plugin=AMap.Geocoder‘},
            ]
        }
    },
    methods: {
        getLocation () {
            let vthis = this
            $.ajax({
                url: ‘https://restapi.amap.com/v3/geocode/geo‘,
                type: ‘get‘,
                dataType: ‘jsonp‘,
                data: {
                    key: ‘6e7239cd1f1aaf595bca3753a67986f8‘,
                    address: this.companyInfo.registeredAddress  
                },
                success: function (data) {
                    vthis.initAMap(data.geocodes[0].location)
                }
            })
        },
        initAMap (data) {
            let map = new AMap.Map(‘container‘, {
                resizeEnable: true,
                zoom: 20,
                center: data.split(‘,‘)
            })
            AMap.plugin(‘AMap.Geocoder‘, function () {
                let marker = new AMap.Marker({
                    map: map,
                    bubble: true
                })
            })
        }
    },
    mounted () {
        this.getLocation()
    }
}
</script>

  

vue 中根据地址名称获取实际经纬度方法

原文:https://www.cnblogs.com/taochengyong/p/11045864.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!