我是谷歌地图的新手。我正在开发一个关于在谷歌地图上显示汽车的应用程序，但谷歌地图没有该地区大多数道路的名称（标签）。我想开发一个系统来允许用户在地图上添加这些名字。职位和姓名将保留在数据库中。我的问题是如何使用 javascript 在地图上添加道路名称。我可以将名称和位置发送到 javascript 代码中的函数，但我需要一个 API 在地图上临时添加这些名称，直到用户关闭应用程序。您会看到随着缩放级别的增加/减少，道路名称会变大或变小或消失。使用常规标记我们无法做到这一点。
问问题
1304 次
1 回答
1
一种选择是使用信息框
这里的一个例子
您可以编写代码来更改字体的大小和/或根据缩放级别不显示信息框（上面的示例仅在您放大到足够合理时才显示信息框）。
代码片段：
var geocoder = null;
var layer = null;
var map = null;
var labels = [];
var infowindow = null;
var address = "4200 East Palm Canyon Dr, Palm Springs CA";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(33.796, -116.5);
var myOptions = {
zoom: 18,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
layer = new google.maps.KmlLayer("http://www.geocodezip.com/ParkerPalmSprings.xml", {
preserveViewport: true,
suppressInfoWindows: true
});
layer.setMap(map);
google.maps.event.addListener(layer, "click", openIW);
var i = 0;
labels.push(new InfoBox({
content: "Gene Autry Residence",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.7967, -116.500632),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "North Building",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.7965, -116.4997),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "South Building",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "40px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-20, 0),
position: new google.maps.LatLng(33.7954, -116.4998),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
/* content: "<div style='fontSize: 8pt;width: 15px;writing-mode: tb-rl;'> East Parking Lot </div>"*/
content: "East Parking Lot",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "40px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-20, 0),
position: new google.maps.LatLng(33.7958, -116.4996),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Lobby",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "30px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-15, 0),
position: new google.maps.LatLng(33.79525, -116.50017),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Mr Parkers",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "40px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-20, 0),
position: new google.maps.LatLng(33.79543, -116.50045),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Ballroom",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.79597, -116.50095),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "PSYC",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.7957, -116.50088),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Autry Lawn",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.797, -116.50075),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "North Parking Lot",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "150px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-75, 0),
position: new google.maps.LatLng(33.7971, -116.500),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Tennis Courts",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.7971, -116.50115),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Petanque Courts",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.7963, -116.50075),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Palm Court",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.79597, -116.50045),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Autry Pool",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "7pt",
width: "35px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-17, 0),
position: new google.maps.LatLng(33.79625, -116.50106),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Picnic Area",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "30px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-15, 0),
position: new google.maps.LatLng(33.796345, -116.50123),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "<div style='fontSize: 8pt;width: 15px;writing-mode: tb-rl;'> Backyard </div>",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "10px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(0, 0),
position: new google.maps.LatLng(33.7965, -116.5014),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Croquet Lawn",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.79595, -116.4999),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Firepit",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "30px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-15, 0),
position: new google.maps.LatLng(33.79591, -116.50019),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Villa" /* (James, Noah, Max, Zoe) */ ,
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "30px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-15, 0),
position: new google.maps.LatLng(33.79619, -116.50051),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Villa" /* (Jake, Lola, Ian, Remi) */ ,
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "30px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-15, 0),
position: new google.maps.LatLng(33.79619, -116.50016),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Villa" /* (Ben, Julia, Joey, Jayda) */ ,
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "30px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-15, 0),
position: new google.maps.LatLng(33.7965, -116.50033),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "North Pool",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "7pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.796455, -116.50002),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Great Lawn",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.7975, -116.50115),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
function showLabels() {
for (var i = 0; i < labels.length; i++) {
labels[i].setMap(map);
}
}
function hideLabels() {
for (var i = 0; i < labels.length; i++) {
labels[i].setMap(null);
}
}
var ParkerPalmSprings = new google.maps.LatLng(33.795451, -116.500116);
var marker = createMarker(ParkerPalmSprings,
"Parker Palm Springs",
'<b>Parker Palm Springs</b><br>4200 East Palm Canyon Dr<br>Palm Springs CA<br>');
google.maps.event.trigger(marker, 'click');
var MercedesBenzOfPalmSprings = new google.maps.LatLng(33.794431, -116.501985);
var MBmarker = createMarker(MercedesBenzOfPalmSprings,
"Mercedes-Benz of Palm Springs",
'<b>Mercedes-Benz of Palm Springs</b><br>4095 East Palm Canyon Drive<br>Palm Springs CA<br>');
google.maps.event.addListener(map, "zoom_changed", function() {
if (map.getZoom() >= 18) {
showLabels();
} else {
hideLabels();
}
});
google.maps.event.addListener(map, "click", function() {
infowindow.close();
});
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 100)
});
function openIW(KMLevent) {
infowindow.close();
infowindow.setOptions({
content: '<div style="height:100;width:250">' + KMLevent.featureData.infoWindowHtml + '</div>',
position: KMLevent.latLng,
pixelOffset: KMLevent.pixelOffset
});
infowindow.open(map);
}
function createMarker(latlng, title, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
return marker;
}
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/geocodezip/v3-utility-library@master/archive/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>于 2012-06-18T18:38:40.257 回答