amap-marker 使用 template 报错

[realmx]

问题

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>

- 报错信息

[Vue warn]: Error in event handler for "AMAP_READY_EVENT": "TypeError: o.a.compile is not a function"

found in

--->

at src/views/pages/monitor.vue at src/views/main-content.vue

at src/views/main.vue at src/App.vue 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

[jamiescou]

我也是遇到这个问题，请问解决了么

[670248996]

我也是遇到这个问题，请问解决了么

[jamiescou]

@670248996 我解决了，用事件委托搞了

[realmx]

我放弃了template，用别的方式做了 @chenmychou @670248996

[MYWProgram]

我放弃了template，用别的方式做了 @chenmychou @670248996

请问用什么方式解决呢？

[realmx]

我放弃了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>

[MYWProgram]

我放弃了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>

试过了你的方法可行，但是我新建实例也解决了这个问题。谢谢！

[QWKk]

在el-amap-marker里写入由vuex导入的内容，你们能实时更新嘛？