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