vue 高德地图标记_vue中使用高德地图 增加vue-cli 3.0之后的 引入方法

vue中使用高德地图api

引入高德js api

webpack配置高德api

组件中使用高德api

引入高德js

首先注册高德api帐号，申请到key

然后在vue-cli创建的 html中引入

webpack配置高德api

在webpack.base.js 中添加如下代码

vue-cli 3.0 之后webpack的配置使用了vue.config.js来配置。所以我们只需要添加一下配置就可以了

module.exports = {

configureWebpack: {

externals: { BMap: "BMap" }

}

};

组件中使用高德js

import AMap from 'AMap'

import {getInitData} from "../../api/map"

import {MessageError} from "../../utils/util"

export default {

name: "Map",

data() {

return {

map: null,

marker: '',

snMarker: new Map()

}

},

methods: {

/**

* 这个方法包含2个字方法

* 1、加载地图

* 2、加载数据

*/

init() {

this.initMap()

this.initMarkerData()

},

initMap() {

this.map = new AMap.Map('mapContainer', {

zoom: 8,

// dragEnable: false

})

// 工具栏

AMap.plugin('AMap.ToolBar', () => {

let toolbar = new AMap.ToolBar()

this.map.addControl(toolbar)

})

//设置默认范围

const bounds = new AMap.Bounds([70.530899, 23.234521], [138.537735, 55.384418])

this.map.setBounds(bounds)

},

/* 这是普通的标记点*/

async initMarkerData() {

let marks = await getInitData() || []

marks.result.map(mark => {

let iconPath = mark.online ? '/static/success.png' : '/static/fail.png'

let marker = new AMap.Marker({

map: this.map,

position: [mark.longitude, mark.latitude],

icon: new AMap.Icon({

size: new AMap.Size(55, 55),

image: iconPath,

imageOffset: new AMap.Pixel(0, 0)

})

})

let info = []

info.push(`

设备号: ${mark.deviceSn}

`)

info.push(`

速度: ${mark.speed}

`)

info.push(`

经度: ${mark.longitude}

`)

info.push(`

纬度: ${mark.latitude}

`)

info.push(`

方向: ${mark.direction}

`)

marker.on('click', (e) => {

let infoWindow = new AMap.InfoWindow({

content: info.join('
'),

})

infoWindow.open(this.map, e.target.getPosition())

})

this.snMarker.set(mark.deviceSn, marker)

})

},

/* 这里是根据某个点查询的方法*/

search() {

let deviceSearch = new AMap.PlaceSearch({

map: this.map

})

AMap.event.addListener(null, "select", (e) => {

// deviceSearch.set

})

}

},

mounted() {

this.init()

},

destroyed() {

this.map.destroy()

}

}

/*@import 'index';*/