1. 最终效果
2. 申请百度地图秘钥
https://blog.csdn.net/weixin_42813606/article/details/88556804
3. 代码
(1)定义
地图组件:map.vue(重要的2个参数:中心点坐标和秘钥)
<template>
<!-- 这是地图组价, 是一个公共的组件 -->
<div
:id="id"
:style="{width:width+'px',height:height+'px',margin:'34px auto'}"
class="m-map"/>
</template>
<script>
export default {
props: {
width: {
type:Number,
default:300
},
height: {
type:Number,
default:300
},
// 中心点
point: {
type:Array,
default(){
return [116.46,39.92] // 1.中心点坐标(百度可查任意城市坐标)
}
}
},
data() {
return {
id: `map`,
key: 'c577ac0dd939b69f706e6468330cdb85' // 2. 秘钥
}
},
watch: {
// 中心点 和 漂浮物
point: function (val, old) {
this.map.setCenter(val)
this.marker.setPosition(val)
}
},
mounted() {
let self = this
self.id = `map${Math.random().toString().slice(4, 6)}`
window.onmaploaded = () => {
let map = new window.AMap.Map(self.id, {
resizeEnable: true,
zoom: 11, // 默认缩放级别,越大越详细
center: self.point
})
self.map = map
//
window.AMap.plugin('AMap.ToolBar', () => {
let toolbar = new window.AMap.ToolBar()
map.addControl(toolbar)
let marker = new window.AMap.Marker({
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
position: self.point
})
self.marker = marker
marker.setMap(map)
})
}
const url = `https://webapi.amap.com/maps?v=1.4.10&key=${self.key}&callback=onmaploaded`
let jsapi = document.createElement('script')
jsapi.charset = 'utf-8'
jsapi.src = url
document.head.appendChild(jsapi)
},
}
</script>
(2)使用
<template>
<div class="mt-products">
<el-row>
<el-col :span="19">
<Crumbs/>
<Category/>
<List/>
</el-col>
<el-col :span="5">
<Map
v-if="point.length"
:width="230"
:height="290"
:point="point"/>
</el-col>
</el-row>
</div>
</template>
<script>
import Crumbs from '@/components/products/crumbs.vue'
import Category from '@/components/products/category.vue'
import List from '@/components/products/list.vue'
import Map from '@/components/public/map.vue' // 1. 引入
export default {
components: {
Crumbs,
Category,
List,
Map
},
data () {
return {
point: [114.30, 30.60] // 2. 传入自定义中心点坐标
}
}
}
</script>
<style lang="scss">
@import '@/assets/css/products/products.scss';
</style>