我想更改infowindows地图以确保尺寸根据内容自动调节,以避免滚动条。
我无法理解如何将例子放在讨论中
我不是专家,你能帮助我吗?
提前致谢
我为我的英语道歉
好的......现在我终于想出了如何插入代码!
代码是这样的:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<meta HTTP-EQUIV="EXPIRES" CONTENT="0">
<title>Google Maps JavaScript API v3 Example: Fusion Tables Layer</title>
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize()
{
geocoder = new google.maps.Geocoder();
var italia = new google.maps.LatLng(42.147114,13.25964);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: italia,
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//------------------- Inizio parte Fusion Layer ------------------------------
var campminuscolo = idcamping.value
var camp = "'" + campminuscolo + "'"
var camp1 = "'Nome' contains ignoring case " + camp
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'indirizzo',
from: '1yqLrOoKCcA-ssAgIVf47mVZbub7SppWCSr5z71g',
where: camp1
},
//------------------ alcune note -----------------------------------
// Select - Contiene il nome di un campo del DB fusion
// From - Identifica l'id della mappa fusion table
// camp1 - contiene l'istruzione che permette la ricerca sul nome del campeggio
// in questo caso il campo del DB fusion che contiene il nome del campeggio
// si chiama "1Nome" (lo vedi appena sopra dove viene impostata la variabile "camp1")
//-------------------------------------------------------------------
styles: [{
markerOptions: {
iconName: "grn_circle"
},
}] //----- Chiudi styles
}); //----- Chiudi layer
layer.setMap(map);
//------------------- Fine parte Fusion Layer ------------------------------
} //------- Fine inizialize
//----------------------------------------
function testenter(e) {
if (e.keyCode == 13) { // tasto enter
initialize();
return false;
}
}
//----------------------------------------
//------------------------------------------------------------------------------------------
// In questa sezione ci sono i dati e le funzioni utilizzate per la search delle localita'
//------------------------------------------------------------------------------------------
var geocoder;
var map;
var markersArray = []
;var marker;
//-------------------------------
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode({ 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
clearOverlays();
document.getElementById("address").value = results[0]['formatted_address'];
map.setCenter(results[0].geometry.location);
map.setZoom(8);
marker = new google.maps.Marker({
map : map,
title : results[0]['formatted_address'],
position : results[0].geometry.location,
icon : "arrow.png",
animation : google.maps.Animation.DROP
});
markersArray.push(marker);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
//--------------------------------
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
//-------------------------------
function testenter1(e) {
if (e.keyCode == 13) {
codeAddress();
return false;
}
}
//-------------------------------------------------------------------------------------------------
// FINE - In questa sezione ci sono i dati e le funzioni utilizzate per la search delle localita'
//-------------------------------------------------------------------------------------------------
//-----------------------------------------
</script>
<style>
#avatar-panel {
position: absolute; bottom: 17px; right: 0px; margin-left: -180px;
width: 144px; height: 53px; z-index: 1; background-color: trasparent;
padding: 1px; border: 0px solid #999;
}
</style>
</head>
<body onload="initialize()">
<style type="text/css">
input {
border: 2px solid gray;
background: rgb(243, 243, 243);
width: 150px;
left: 100px;
padding: 4px;
position: absolute;
z-index: 1;
}
</style>
<input type="text" id="idcamping" placeholder="Cerca Ristorante " onKeyPress ="testenter(event)"style="left: 100px;">
<input type="text" id="address" placeholder="Cerca Localita'" onKeyPress ="testenter1
(event)"style="left: 265px;">
<div id="map-canvas"></div>
<div id="avatar-panel">
<img src="logo mappe.png" width="144" height="53" />
</div>
</body>
</html>
感谢回复