基本 LocalContextMapView

下面是基本的 Local Context 地图视图,不含任何自定义项。我们指定了特定于 Local Context Library 的必需属性 placeTypePreferencesmaxPlaceCount,以及 Map 基本属性 centerzoom

了解代码

Local Context 地图选项

Local Context 地图由 google.maps.localContext.LocalContextMapView 类表示,而不是 google.maps.Map 类。LocalContextMapView 构造函数的三个必需参数是文档对象模型 (DOM) 中的元素,这些元素将成为地图视图的容器、要包含的地点类型列表,以及要显示的地点结果数量上限。

TypeScript

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [
    { type: "restaurant" },
    { type: "tourist_attraction" },
  ],
  maxPlaceCount: 12,
});

JavaScript

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [
    { type: "restaurant" },
    { type: "tourist_attraction" },
  ],
  maxPlaceCount: 12,
});

定义 Local Context 地图视口

地点搜索的默认 locationRestriction 边界由地图视口定义。首次调用 google.maps.localContext.LocalContextMapView.map.setOptions() 时,如果为地图加载定义了中心和缩放级别,系统会建立地图视口。

TypeScript

map.setOptions({
  center: { lat: 51.507307, lng: -0.08114 },
  zoom: 14,
});

JavaScript

map.setOptions({
  center: { lat: 51.507307, lng: -0.08114 },
  zoom: 14,
});

setOptions() 的后续调用不会刷新 Local Context Library 显示的热门地点。

试用示例