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

最新推荐文章于 2024-10-09 14:07:22 发布

weixin_34185364

最新推荐文章于 2024-10-09 14:07:22 发布

阅读量3.5k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/taochengyong/p/11045864.html

版权

<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>

转载于:https://www.cnblogs.com/taochengyong/p/11045864.html