当您通过 Google Maps JavaScript API 启用登录时，您网站上的地图将为用户量身定制。登录 Google 帐户的用户将可保存地点，以供稍后在 Web 或移动设备上查看。从地图保存的地点可归因于您的网站或应用。
概览
您的网站的每一位访客都会看到专为其量身定制的 Google 地图。如果他们使用 Google 帐户登录，则其查看的地图上将会直接嵌入他们保存的地点、住宅和办公位置以及其他内容。此外，这还意味着与地图的交互（如为位置添加星标）将得到保存，以方便在桌面版或移动版 Google 地图以及用户在 Web 上访问的任何其他 Google 地图中进行查看。
这些用户专属详情只对已登录用户可见；对您的应用的其他用户不可见，也无法通过 API 进行访问。以下是一个已登录地图的示例。您应该会在地图的右上角看到一个 Google 登录框或您的 Google 头像。
请参阅完整代码示例。
启用登录
如需在通过 Google Maps JavaScript API 创建的地图上启用登录，请加载 v3.18 或更高版本 API 以及附加的 signed_in=true 参数。
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&signed_in=true&key=YOUR_API_KEY" async defer> </script>
您应该会在地图的右上角看到一个 Google 登录框或您的 Google 头像。
用户可以通过点击地图右上角的登录控件使用其 Google 帐户登录。如果他们之前在其他所有物上登录过 Google，将会自动登录地图。
归因保存
通过允许用户在 Google 地图上保存地点，帮助他们记忆对其最为重要的位置。保存的地点将出现在该用户在 Web 或移动设备上查看的其他 Google 地图中。当用户从 SaveWidget 或 InfoWindow 保存地点时，您可以加入个性化的提供方说明和返回应用的链接。
您可以通过以下两种方式启用归因保存功能：
- 向某个标记添加
place信息，以允许从锚定于该Marker的InfoWindow保存地点 - 创建一个自定义
SaveWidget
稍后可通过在地图上选择保存的地点来访问地点。
通过信息窗口保存到 Google 地图
向某个标记添加有关地点的信息，以在默认信息窗口上启用 Save to Google Maps 控件。该控件将自动添加到任何与该标记关联的信息窗口。作为可选步骤，您可以将保存归因于您的应用，以帮助用户记忆原始来源。
如需启用从信息窗口保存到 Google 地图：
- 新建一个
Marker。 - 在
MarkerOptions中，指定map属性、place属性和attribution属性。请注意，如果提供了place，则不需要position。 - 在
place对象中，指定一个location和下列项之一：placeId，用于对地点进行唯一标识。详细了解如何通过地点 ID 引用地点。query字符串，用于搜索location附近的地点。搜索字符串应尽可能具体。例如：'stanley park vancouver bc canada'。
- 在
attribution对象中，指定：- 保存的
source。通常是您的网站或应用的名称。 - 一个以返回您的网站的链接形式提供的可选
webUrl。 - 一个以 URL 架构形式指定的可选
iosDeepLinkId，在 iOS 上查看时将替代webUrl显示。
- 保存的
- 新建一个
InfoWindow。 - 添加一个事件侦听器，以在点击
Marker时打开InfoWindow。
如此便可启用点击标记时保存到 Google 地图的选项。
以下是一个示例，它使用 query 字符串来搜索位置。
请参阅完整代码示例。
// [START script-body]
// When you add a marker using a Place instead of a location, the Maps
// API will automatically add a 'Save to Google Maps' link to any info
// window associated with that marker.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: -33.8666, lng: 151.1958}
});
var marker = new google.maps.Marker({
map: map,
// Define the place with a location, and a query string.
place: {
location: {lat: -33.8666, lng: 151.1958},
query: 'Google, Sydney, Australia'
},
// Attributions help users find your site again.
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
// Construct a new InfoWindow.
var infoWindow = new google.maps.InfoWindow({
content: 'Google Sydney'
});
// Opens the InfoWindow when marker is clicked.
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
}
// [END script-body]
通过 SaveWidget 保存到 Google 地图
您可以利用 SaveWidget 控件创建用于保存地点的自定义 UI。当您使用 SaveWidget 时，可以指定附加提供方说明数据，以便您的用户记忆其保存地点的来源，以及方便地返回您的应用。
如需向您的应用添加 SaveWidget，您需要执行下列步骤。
- 向某个包含 Google 地图的页面添加一个
div。 - 通过标记指示要保存的地点，以便您的用户清楚他们要保存的地点。
- 创建一个
SaveWidgetOptions对象，其中包括一个place和attribution对象字面量。 - 新建一个
SaveWidget对象，向其传递div以及您已添加的选项。
以下显示的是 Google 悉尼分公司的保存小工具示例。在该示例中，我们在地图画布外创建 div，然后利用 Google Maps JavaScript API 以控件形式添加该 div。
请参阅完整代码示例。
<!DOCTYPE html>
<html>
<head>
<title>Custom Save Widget</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#save-widget {
width: 300px;
box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
background-color: white;
padding: 10px;
font-family: Roboto, Arial;
font-size: 13px;
margin: 15px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="save-widget">
<strong>Google Sydney</strong>
<p>We’re located on the water in Pyrmont, with views of the Sydney Harbour Bridge, The
Rocks and Darling Harbour. Our building is the greenest in Sydney. Inside, we have a
"living wall" made of plants, a tire swing, a library with a nap pod and some amazing
baristas.</p>
</div>
<script>
/*
* This sample uses a custom control to display the SaveWidget. Custom
* controls can be used in place of the default Info Window to create a
* custom UI.
* This sample uses a Place ID to reference Google Sydney. Place IDs are
* stable values that uniquely reference a place on a Google Map and are
* documented in detail at:
* https://developers.google.com/maps/documentation/javascript/places#placeid
*/
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: -33.8666, lng: 151.1958},
mapTypeControlOptions: {
mapTypeIds: [
'roadmap',
'satellite'
],
position: google.maps.ControlPosition.BOTTOM_LEFT
}
});
var widgetDiv = document.getElementById('save-widget');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(widgetDiv);
// Append a Save Control to the existing save-widget div.
var saveWidget = new google.maps.SaveWidget(widgetDiv, {
place: {
// ChIJN1t_tDeuEmsRUsoyG83frY4 is the place Id for Google Sydney.
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
location: {lat: -33.866647, lng: 151.195886}
},
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
var marker = new google.maps.Marker({
map: map,
position: saveWidget.getPlace().location
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap">
</script>
</body>
</html>
需要帮助？请访问我们的