基本 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 显示的热门地点。

试用示例