Question

我一直在从事一个项目，但这使我发疯。我无法在页面上显示适当的图像。我有4个用户来自不同的国家，并试图在地图上显示其本国。

 import canada from "@/assets/country/canada.png"
 import england from "@/assets/country/england.png"
 import usa from "@/assets/country/usa.png"
 import belgium from "@/assets/country/belgium.png"

  if(data.geolocation){
        let countryMarker = data.country
       
        // let canada = require("@/assets/country/canada.png")
        // let england =  require("@/assets/country/england.png")
        // let usa  =  require("@/assets/country/usa.png")
        // let belgium =  require("@/assets/country/belgium.png")
      
        let marker = new google.maps.Marker({
          position: {
            lat: data.geolocation.lat,
            lng: data.geolocation.lng
          },
          map,
          animation: google.maps.Animation.DROP,
          icon: usa,         
          title: data.alias
          
       })

当我管理日志countryMarker时，我得到了正确的国家或data.country。但是，当我制作图标：countryMarker时，它不能与我想要的每个国家标志的图像一起使用。但是如上所述，如果我将美国作为图标：所有标记都显示有美国国旗。所以这告诉我它正在阅读正确的东西？否则将不会显示任何标志？同样，当我将其他国家/地区用作非变量时。所有其他属性都是正确的。我只是无法使图像与我想要的适当图标匹配

Answer 1

似乎您正在尝试在data.country字符串中查找与国家/地区名称对应的图像资源。为此，您可以创建一个查询表/对象（1️⃣），然后在创建google.maps.Marker（2️⃣）时引用它：

import canada from "@/assets/country/canada.png"
import england from "@/assets/country/england.png"
import usa from "@/assets/country/usa.png"
import belgium from "@/assets/country/belgium.png"

// 1️⃣
const flags = {
  canada,
  england,
  usa,
  belgium
}

if (data.geolocation) {
  let countryMarker = data.country

  let marker = new google.maps.Marker({
    //...
    icon: flags[countryMarker] // 2️⃣
  })
}

图片无法以我希望使用Vue的方式呈现在页面上

1 个答案: