Google 地图 API 像在 iframe 地图上一样获取地点文本
Google Maps API get place text like on iframe map
所以我找到了几种将地图放到我的页面上的方法,第一个版本是使用 iframe,如下所示:
<iframe src="https://www.google.com/maps/embed/v1/place?key=[APIKEY]&q=place_id:[PlaceID]"></iframe>
它给出了一个如下图所示的标记,标记旁边有地点的名称:
然而,这并不完美,因为它在左上角有一个巨大的白框,而且根据许多 SO 帖子,您无法将其删除。
所以我想我会尝试 js 路线,所以有以下代码:
var map = new google.maps.Map(this, {
zoom: 15,
center: { lat: options.latitude, lng: options.longitude }
});
marker = new google.maps.Marker({
map: map,
title: options.title
});
marker.setPlace({
placeId: options.placeId,
location: { lat: options.latitude, lng: options.longitude }
});
var infowindow = new google.maps.InfoWindow(
{
content: '<strong>' + options.title + '</strong><br />' + options.address
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
其中所有的options
都填上了合适的值。但是,这会生成以下地图,该地图更好,因为它没有白框:
然而,第二张地图上没有商店文字,即使它使用与第一张地图相同的地点 ID。
有什么方法可以更改 js 代码,使其包含 iframe 版本中的位置文本吗?我搜索了所有文档和示例,但找不到任何设置来执行此操作
您可以自己将该标签添加到地图上。一种选择是使用 InfoBox:
function addMapLabel(text, latlng, map) {
var labelText = "<b>" + text + "</b>";
var myOptions = {
content: labelText,
boxStyle: {
border: "none",
textAlign: "center",
fontSize: "8pt",
width: "auto",
color: "#800000"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(10, -10),
position: latlng,
closeBoxURL: "",
isHidden: false,
pane: "mapPane",
enableEventPropagation: true
};
var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);
}
代码片段:
function addMapLabel(text, latlng, map) {
var labelText = "<b>" + text + "</b>";
var myOptions = {
content: labelText,
boxStyle: {
border: "none",
textAlign: "center",
fontSize: "8pt",
width: "auto",
color: "#800000"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(10, -10),
position: latlng,
closeBoxURL: "",
isHidden: false,
pane: "mapPane",
enableEventPropagation: true
};
var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);
}
var map;
var options = {
placeId: "ChIJ68TmaaTCe0gRy70pZDzQ17U",
latitude: 53.7153659,
longitude: -1.8790866,
title: "Dickies Tiles",
address: "Aachen Way, Halifax HX1 3ND, United Kingdom"
}
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 15,
center: {
lat: options.latitude,
lng: options.longitude
}
});
marker = new google.maps.Marker({
map: map,
title: options.title
});
marker.setPlace({
placeId: options.placeId,
location: {
lat: options.latitude,
lng: options.longitude
}
});
var infowindow = new google.maps.InfoWindow({
content: '<strong>' + options.title + '</strong><br />' + options.address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
addMapLabel(options.title, new google.maps.LatLng(options.latitude, options.longitude), map);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>
以防万一其他人需要这种东西,我在我接受的答案中找到了一个比信息框更好的插件(尽管我将其保留为已接受的,因为它为我指明了正确的方向)。它是:
它提供与 InfoBox 相同的功能,但还允许您像单击标记一样单击标签以打开信息 window
我如何使用它的一个例子是:
var map;
var options = {
placeId: "ChIJ68TmaaTCe0gRy70pZDzQ17U",
latitude: 53.7153659,
longitude: -1.8790866,
title: "Dickies Tiles",
address: "Aachen Way, Halifax HX1 3ND, United Kingdom"
}
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 15,
center: {
lat: options.latitude,
lng: options.longitude
}
});
var marker = new MarkerWithLabel({
position: new google.maps.LatLng(options.latitude, options.longitude),
map: map,
title: options.title,
labelContent: options.title,
labelAnchor: new google.maps.Point(-13, 15),
labelClass: "map-label",
labelStyle: {
border: 'none',
textAlign: 'center',
fontSize: '12px',
width: 'auto',
color: '#800000'
}
});
marker.setPlace({
placeId: options.placeId,
location: {
lat: options.latitude,
lng: options.longitude
}
});
var infowindow = new google.maps.InfoWindow({
content: '<strong>' + options.title + '</strong><br />' + options.address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
.map-label { text-shadow: -1px -1px 0 #ffffff,1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px 1px 0 #ffffff; font-weight:bold; }
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas"></div>
所以我找到了几种将地图放到我的页面上的方法,第一个版本是使用 iframe,如下所示:
<iframe src="https://www.google.com/maps/embed/v1/place?key=[APIKEY]&q=place_id:[PlaceID]"></iframe>
它给出了一个如下图所示的标记,标记旁边有地点的名称:
然而,这并不完美,因为它在左上角有一个巨大的白框,而且根据许多 SO 帖子,您无法将其删除。
所以我想我会尝试 js 路线,所以有以下代码:
var map = new google.maps.Map(this, {
zoom: 15,
center: { lat: options.latitude, lng: options.longitude }
});
marker = new google.maps.Marker({
map: map,
title: options.title
});
marker.setPlace({
placeId: options.placeId,
location: { lat: options.latitude, lng: options.longitude }
});
var infowindow = new google.maps.InfoWindow(
{
content: '<strong>' + options.title + '</strong><br />' + options.address
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
其中所有的options
都填上了合适的值。但是,这会生成以下地图,该地图更好,因为它没有白框:
然而,第二张地图上没有商店文字,即使它使用与第一张地图相同的地点 ID。
有什么方法可以更改 js 代码,使其包含 iframe 版本中的位置文本吗?我搜索了所有文档和示例,但找不到任何设置来执行此操作
您可以自己将该标签添加到地图上。一种选择是使用 InfoBox:
function addMapLabel(text, latlng, map) {
var labelText = "<b>" + text + "</b>";
var myOptions = {
content: labelText,
boxStyle: {
border: "none",
textAlign: "center",
fontSize: "8pt",
width: "auto",
color: "#800000"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(10, -10),
position: latlng,
closeBoxURL: "",
isHidden: false,
pane: "mapPane",
enableEventPropagation: true
};
var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);
}
代码片段:
function addMapLabel(text, latlng, map) {
var labelText = "<b>" + text + "</b>";
var myOptions = {
content: labelText,
boxStyle: {
border: "none",
textAlign: "center",
fontSize: "8pt",
width: "auto",
color: "#800000"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(10, -10),
position: latlng,
closeBoxURL: "",
isHidden: false,
pane: "mapPane",
enableEventPropagation: true
};
var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);
}
var map;
var options = {
placeId: "ChIJ68TmaaTCe0gRy70pZDzQ17U",
latitude: 53.7153659,
longitude: -1.8790866,
title: "Dickies Tiles",
address: "Aachen Way, Halifax HX1 3ND, United Kingdom"
}
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 15,
center: {
lat: options.latitude,
lng: options.longitude
}
});
marker = new google.maps.Marker({
map: map,
title: options.title
});
marker.setPlace({
placeId: options.placeId,
location: {
lat: options.latitude,
lng: options.longitude
}
});
var infowindow = new google.maps.InfoWindow({
content: '<strong>' + options.title + '</strong><br />' + options.address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
addMapLabel(options.title, new google.maps.LatLng(options.latitude, options.longitude), map);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>
以防万一其他人需要这种东西,我在我接受的答案中找到了一个比信息框更好的插件(尽管我将其保留为已接受的,因为它为我指明了正确的方向)。它是:
它提供与 InfoBox 相同的功能,但还允许您像单击标记一样单击标签以打开信息 window
我如何使用它的一个例子是:
var map;
var options = {
placeId: "ChIJ68TmaaTCe0gRy70pZDzQ17U",
latitude: 53.7153659,
longitude: -1.8790866,
title: "Dickies Tiles",
address: "Aachen Way, Halifax HX1 3ND, United Kingdom"
}
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 15,
center: {
lat: options.latitude,
lng: options.longitude
}
});
var marker = new MarkerWithLabel({
position: new google.maps.LatLng(options.latitude, options.longitude),
map: map,
title: options.title,
labelContent: options.title,
labelAnchor: new google.maps.Point(-13, 15),
labelClass: "map-label",
labelStyle: {
border: 'none',
textAlign: 'center',
fontSize: '12px',
width: 'auto',
color: '#800000'
}
});
marker.setPlace({
placeId: options.placeId,
location: {
lat: options.latitude,
lng: options.longitude
}
});
var infowindow = new google.maps.InfoWindow({
content: '<strong>' + options.title + '</strong><br />' + options.address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
.map-label { text-shadow: -1px -1px 0 #ffffff,1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px 1px 0 #ffffff; font-weight:bold; }
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas"></div>