如何更改 nuxt gmap 标记图标大小？

Question

我添加了标记 this.How 我可以缩小添加到标记中的 png 吗？

     <GMap
    v-if="car"
    ref="gMap"
    :center="{ lat: car.data.posLatitude, lng: car.data.posLongitude }"
    :zoom="6"
  >
    <GMapMarker
      :position="{
        lat: this.geolocation.results[0].geometry.location.lat,
        lng: this.geolocation.results[0].geometry.location.lng,
      }"
      :options="{ icon: require('../../../assets/home.png') }"
    >
    </GMapMarker>

    <GMapMarker
      :position="{ lat: car.data.posLatitude, lng: car.data.posLongitude }"
      :options="{ icon: require('../../../assets/car.png') }"
    >
    </GMapMarker>
  </GMap>

screenshot like this. I want to shrink the icon

Answer 1

假设您的 GMapMarker 组件处理您的实际图标图像渲染，您可以像这样操作它：

var icon = {
    url: "../res/sit_marron.png", // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};

<GMapMarker :icon="icon"></GMapMarker>

然后在您的 GMapMarker 组件中，您可以像这样渲染它：

// grab icon from the props and use it as needed:

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: map,
    icon: icon
});

官方文档中有更多信息 - https://developers.google.com/maps/documentation/javascript/examples/icon-complex#maps_icon_complex-javascript

如何更改 nuxt gmap 标记图标大小？

How to change the nuxt gmap marker icon size?

css

google-maps-markers

vue.js

vuejs2

nuxt.js