Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use native Amap in vue". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how vue uses native Amap".

1. First create a new vue.config.js under the root directory of the vue project. This file is not available, and vue does not provide it.

Module.exports = {configureWebpack: {externals: {'AMap':' AMap', / / Amap configuration 'AMapUI':' AMapUI'}},}

2. Introduce Amap js file into vue file index.html

Default We're sorry but default doesn't work properly without JavaScript enabled. Please enable it to continue.

3. Use in vue file

Import AMap from 'AMap' / / introduce Amap let map,marker Export default {data () {return {markers: [{icon: 1, position: [121.506377, 31.243105], name:' Zhang San',}, {icon: 1, position: [121.506077, 31.242105], name:' Li Si',} {icon: 1, position: [121.506577, 31.240105], name:' Wang Wu',}]}}, mounted () {this.init ()}, methods: {init () {let that = this Map = new AMap.Map ('container', {resizeEnable: true, rotateEnable:true, pitchEnable:true, zoom: 17, pitch:50, rotation:-15, viewMode:'3D',// enable 3D view. Default is whether to turn off the buildingAnimation:true,// block to drive the drawing / / expandZoomRange:true). Zooms: [3Jing 20], center:that.markers [0] .position}) AMap.plugin (['AMap.ControlBar',], function () {/ / add 3D compass control map.addControl (new AMap.ControlBar ()) }) This.addMarker (this.markers)}, / / drag event mapDraw (arriveCoor) {map = new AMap.Map ('container', {/ / map-location is the id resizeEnable: true of the embedded map div, / / whether to monitor the map container size change zoom:20 / / initialize the map level center: arriveCoor / / initialize the map center}) / / Anchor this.addMarker (arriveCoor);}, / / instantiate the point marker addMarker (arriveCoor) {var _ this = this ArriveCoor.forEach (item= > {marker = new AMap.Marker ({icon: item.icon, / / Picture ip imageSize: "20px", position: [item.position [0], item.position [1]], / / offset: new AMap.Pixel (- 13,-30), content: `${item.name}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.