vue-amap
vue-amap copied to clipboard
Published
20 hours ago •
ElemeFE
ElemeFE
amap-marker 使用 template 报错
问题
amap-marker 使用 template 报错
- 复现代码
<template>
<el-row type="flex" justify="space-between" :gutter="15" :class="$style.row">
<el-col :class="$style['col-map']">
<el-amap vid="amap" :zoom="zoom" :center="center" :plugin="plugin">
<el-amap-marker
v-for="(item, index) in markers"
:key="index"
:position="item.position"
:template="item.template"
></el-amap-marker>
</el-amap>
</el-col>
<el-col :class="$style['col-side']">
<div></div>
</el-col>
</el-row>
</template>
<script>
import Vue from 'vue'
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
export default {
data() {
return {
zoom: 13,
center: [109.429148, 24.325587],
markers: [
{
position: [109.410714, 24.30704],
template: `map zoom: ${this.zoom}`
}
],
plugin: [
{
pName: 'Scale'
}
]
}
},
beforeCreate() {
VueAMap.initAMapApiLoader({
// 高德的key
key: '------你的key------',
// 插件集合
plugin: [
'AMap.Autocomplete', // 输入提示插件
'AMap.PlaceSearch', // POI搜索插件
'AMap.Scale', // 右下角缩略图插件 比例尺
'AMap.OverView', // 地图鹰眼插件
'AMap.ToolBar', // 地图工具条
'AMap.MapType', // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
'AMap.PolyEditor', // 编辑 折线多，边形
'AMap.CircleEditor', // 圆形编辑器插件
'AMap.Geolocation' // 定位控件，用来获取和展示用户主机所在的经纬度位置
],
// 高德 sdk 版本，默认为 1.4.4
v: '1.4.4'
})
}
}
</script>
<style lang="scss" module>
.row {
height: calc(100vh - 50px - 30px);
}
.col-map > div,
.col-side > div {
border-radius: 4px;
}
.col-side {
// width: calc(100vw - 400px - 30px);
max-width: 400px;
min-width: 400px;
& > div {
height: 100%;
background: #d3dce6;
}
}
</style>
- 报错信息
[Vue warn]: Error in event handler for "AMAP_READY_EVENT": "TypeError: o.a.compile is not a function"
found in
---> <ElAmapMarker>
<ElAmap>
<ElCol>
<ElRow>
<Monitor> at src/views/pages/monitor.vue
<MainContent> at src/views/main-content.vue
<Main> at src/views/main.vue
<App> at src/App.vue
<Root> vue.runtime.esm.js:620:15
TypeError: "o.a.compile is not a function"
a webpack-internal:///./node_modules/vue-amap/dist/index.js:1
template webpack-internal:///./node_modules/vue-amap/dist/index.js:1
convertSignalProp webpack-internal:///./node_modules/vue-amap/dist/index.js:1
convertProps webpack-internal:///./node_modules/vue-amap/dist/index.js:1
convertProps webpack-internal:///./node_modules/vue-amap/dist/index.js:1
register webpack-internal:///./node_modules/vue-amap/dist/index.js:1
mounted webpack-internal:///./node_modules/vue-amap/dist/index.js:1
VueJS 2
createMap webpack-internal:///./node_modules/vue-amap/dist/index.js:1
createMap webpack-internal:///./node_modules/vue-amap/dist/index.js:1
run webpack-internal:///./node_modules/core-js/modules/es6.promise.js:75
notify webpack-internal:///./node_modules/core-js/modules/es6.promise.js:92
flush webpack-internal:///./node_modules/core-js/modules/_microtask.js:18
vue.runtime.esm.js:1887:13
VueJS 5
createMap webpack-internal:///./node_modules/vue-amap/dist/index.js:1
createMap webpack-internal:///./node_modules/vue-amap/dist/index.js:1
run webpack-internal:///./node_modules/core-js/modules/es6.promise.js:75
notify webpack-internal:///./node_modules/core-js/modules/es6.promise.js:92
flush webpack-internal:///./node_modules/core-js/modules/_microtask.js:18
VueAMap 版本
1.4.4
OS/Browsers version
macOS/Firefox 67.0b11 (64-bit)
Vue 版本
2.6.10
复现地址
预期
实际
feature request
我放弃了template，用别的方式做了 @chenmychou @670248996
请问用什么方式解决呢？
用amap-marker的插槽，然后内容写好相对定位就可以了
<el-col>
<el-amap
ref="amap"
:zoomEnable="amap.zoomEnable"
:plugin="amap.plugin"
:events="amap.events"
:class="$style.amap"
>
<el-amap-marker
:bubble="true"
v-for="(item, index) in bridgeList"
:key="index"
:zIndex="item.zIndex"
:position="item.position"
>
<div :class="[$style.marker, item.hover && $style['marker-hover']]">
<div :class="$style['marker-content']">
<div
v-if="item.bridgeMapPic"
:class="$style['marker-thumb']"
@mouseenter="mouseenter(item)"
@mouseleave="mouseleave(item)"
@click="go(item)"
>
<img :src="item.bridgeMapPic | convertUrl">
<div>{{item.bridgeName}}</div>
</div>
<span
@mouseenter="mouseenter(item)"
@mouseleave="mouseleave(item)"
@click="go(item)"
>{{item.bridgeName}}</span>
</div>
<i
class="el-icon-location"
:class="[$style['marker-icon'], item.status && $style.danger]"
@mouseenter="mouseenter(item)"
@mouseleave="mouseleave(item)"
@click="go(item)"
></i>
</div>
</el-amap-marker>
</el-amap>
</el-col>
我放弃了template，用别的方式做了 @chenmychou @670248996
请问用什么方式解决呢？
用amap-marker的插槽，然后内容写好相对定位就可以了
<el-col> <el-amap ref="amap" :zoomEnable="amap.zoomEnable" :plugin="amap.plugin" :events="amap.events" :class="$style.amap" > <el-amap-marker :bubble="true" v-for="(item, index) in bridgeList" :key="index" :zIndex="item.zIndex" :position="item.position" > <div :class="[$style.marker, item.hover && $style['marker-hover']]"> <div :class="$style['marker-content']"> <div v-if="item.bridgeMapPic" :class="$style['marker-thumb']" @mouseenter="mouseenter(item)" @mouseleave="mouseleave(item)" @click="go(item)" > <img :src="item.bridgeMapPic | convertUrl"> <div>{{item.bridgeName}}</div> </div> <span @mouseenter="mouseenter(item)" @mouseleave="mouseleave(item)" @click="go(item)" >{{item.bridgeName}}</span> </div> <i class="el-icon-location" :class="[$style['marker-icon'], item.status && $style.danger]" @mouseenter="mouseenter(item)" @mouseleave="mouseleave(item)" @click="go(item)" ></i> </div> </el-amap-marker> </el-amap> </el-col>
我放弃了template，用别的方式做了 @chenmychou @670248996
请问用什么方式解决呢？
用amap-marker的插槽，然后内容写好相对定位就可以了
<el-col> <el-amap ref="amap" :zoomEnable="amap.zoomEnable" :plugin="amap.plugin" :events="amap.events" :class="$style.amap" > <el-amap-marker :bubble="true" v-for="(item, index) in bridgeList" :key="index" :zIndex="item.zIndex" :position="item.position" > <div :class="[$style.marker, item.hover && $style['marker-hover']]"> <div :class="$style['marker-content']"> <div v-if="item.bridgeMapPic" :class="$style['marker-thumb']" @mouseenter="mouseenter(item)" @mouseleave="mouseleave(item)" @click="go(item)" > <img :src="item.bridgeMapPic | convertUrl"> <div>{{item.bridgeName}}</div> </div> <span @mouseenter="mouseenter(item)" @mouseleave="mouseleave(item)" @click="go(item)" >{{item.bridgeName}}</span> </div> <i class="el-icon-location" :class="[$style['marker-icon'], item.status && $style.danger]" @mouseenter="mouseenter(item)" @mouseleave="mouseleave(item)" @click="go(item)" ></i> </div> </el-amap-marker> </el-amap> </el-col>
试过了你的方法可行，但是我新建实例也解决了这个问题。谢谢！
