Import js package:

Index.html: / / baidu map < script type = "text/javascript" SRC = "http://api.map.baidu.com/getscript?v=2.0&ak= ` application secret-key `" > < / script > / / map <script language="javascript" SRC = "http://webapi.amap.com/maps?v=1.4.15&key= ` application secret-key ` & plugin = AMap. The ControlBar, Map3D, AMap. DistrictSearch" > < / script >Copy the code

Note:

When applying for Amap, pay attention to the difference between the Web side (JS API) and Web service. I think these two look quite similar and were used incorrectly at the beginning.

Take a look at the official description of both:

The Web service API is called by the HTTP interface for the backend, and the front-end uses the JS API.

Declare a global variable:

Webpack. Base. Conf. Js file

Module. exports = {externals: {'BMap': 'window.BMap', // baidu map 'AMap': 'AMap' // Exports},...... }Copy the code

Or vue. Config. Js file

Module. exports = {configureWebpack: {// externals: {'BMap': 'window.bmap ', // BMap' AMap': // AMap}},... }Copy the code

3. Loading and using:

// Create a map in the Baidu Map container for subsequent use see the Baidu Map API

this.map = new BMap.Map(‘subwayContent’)

// The use of Amap

Load full map:

import AMap from 'AMap' this.map = new AMap.Map('subwayContent', { resizeEnable: true, rotateEnable: true, pitchEnable: Zoom: 11, Pitch: 60, Rotation: -15, viewMode: BuildingAnimation: true, buildingAnimation: True, buildingAnimation: True, buildingAnimation: True, buildingAnimation: True, buildingAnimation: True, buildingAnimation: True True, zooms: [3, 20], skyColor: '#132237', // Layers: [// new amap.tilelayer.RoadNet({// rejectMapMask: False / /}) / /, / / center: [113.289243, 23.23746] / / the map center set up})Copy the code

Load local administrative area map:

Let opts = {subdistrict: 0, Extensions: 'all', level: District = new amap.districtsearch (opts) district.search('XX '), function (status, 'XX ') result) { let bounds = result.districtList[0].boundaries let mask = [] for (let i = 0; i < bounds.length; i += 1) { mask.push([bounds[i]]) } map = new AMap.Map('container', { mask: mask, center: [116.68, 23.62], disableSocket: true, viewMode: '3D', showLabel: false, labelzIndex: 130, expandZoomRange: true, Zooms: [3, 20], Zoom: 11, pitch: 0, // Rotation: -15, // '#D5EFEE'}) // Set light map.ambientLight = new amap.lights.ambientLight ([1, 1, 1], 0.5) map. DirectionLight = new AMap. Towns. DirectionLight ([0, 0, 1], [1, 1, 1), Object3Dlayer = new amap.object3DLayer () // {zIndex: 1} map.add(object3Dlayer) // Bind map.on('click', function (e) {console.log(e.linglat.getlng (), E.linglat.getlat ()) // Get the latitude and longitude of the click point}) // Bind the map.on('dragend', Function () {console.log(' map dragging ')}) // Map loading complete map.on('complete', function () {console.log(' Map loading complete! ')}) // Set theme color map.setmapStyle ('amap://styles/fresh') // Let Satellite overlay = new Amap.tilelayer.satellite () map.add(satelliteLayer) })Copy the code