Vue2+TSX中<gmap-map>的disableDefaultUI属性失效求助

你遇到的问题不是需要写禁用函数，核心是TSX的属性绑定逻辑和组件props规则的问题——之前的写法没契合<gmap-map>（推测是vue-google-maps组件）的配置要求。

问题根源 #

vue-google-maps的GmapMap组件，像disableDefaultUI、mapTypeControl这类控件配置，并非单独暴露的props，而是必须嵌套在options这个统一的配置prop里。JS文件里单独写属性能生效，是因为JS不做类型校验，组件会自动把未识别的props合并到options中；但TSX里TypeScript会严格校验props合法性，单独写这些属性会被组件直接忽略，甚至因类型不匹配报错。

正确TSX写法 #

1. 先定义符合Google Maps规范的配置对象，注意布尔值用原生true/false，不要用字符串：

import Vue from 'vue';
import { GmapMap } from 'vue-google-maps';

export default Vue.extend({
  render() {
    // 按需配置：要么一键禁用所有默认控件，要么单独关闭特定控件
    const mapOptions = {
      disableDefaultUI: true,
      // 也可以单独禁用某类控件，比如：
      // mapTypeControl: false,
      // zoomControl: false,
      // streetViewControl: false
    };

    return (
      <GmapMap
        zoom={12}
        center={{ lat: 39.9042, lng: 116.4074 }}
        // 把配置通过options prop传递给组件
        options={mapOptions}
      />
    );
  }
});

2. 若遇到类型报错：
   可给配置对象加上类型断言，匹配Google Maps的MapOptions类型：

const mapOptions = {
  disableDefaultUI: true
} as google.maps.MapOptions;

额外说明 #

你仓库里的JS文件用gmap3实现，那是另一款Google Maps封装库，写法和vue-google-maps完全不同，不能直接照搬。vue-google-maps的所有地图原生配置，都需要通过options这一个prop传递。

内容的提问来源于stack exchange，提问作者nouf alsalem