如何自定义Google Maps InfoWindow？
配合， 我试图在InfoWindow元素中设置关闭按钮和一些边距的样式。 他们正在加载它的内容，设计风格，但我需要为信息本身设计风格。
这里有infowindow html，也许有帮助
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="shortcut icon" href="startup/flat-ui/images/favicon.ico">
<link rel="stylesheet" href="startup/flat-ui/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="startup/flat-ui/css/flat-ui.css">
<!-- Using only with Flat-UI (free)-->
<link rel="stylesheet" href="startup/common-files/css/icon-font.css">
<!-- end -->
<link rel="stylesheet" href="startup/common-files/css/animations.css">
<link rel="stylesheet" href="static/css/style.css">
<title></title>
</head>
<body>
<div class="page-wrapper">
<section id="contactform" class="contacts-1">
<div class="container">
<div class="row">
<div class="col-sm-8">
<h3>Step 1: Information Form</h3>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<?php
if($_SERVER['REQUEST_METHOD'] == "POST") {
// Form variables
// req: name, ship, ctname, ctnum, email
$goto_after_mail = "http://www.recycleoilsep.com/step2.html";
$formName = filter_var($_POST['formName'], FILTER_SANITIZE_STRING);
$formShip = filter_var($_POST['formShip'], FILTER_SANITIZE_STRING);
$formCity = filter_var($_POST['formCity'], FILTER_SANITIZE_STRING);
$formState = filter_var($_POST['formState'], FILTER_SANITIZE_STRING);
$formZip = filter_var($_POST['formZip'], FILTER_SANITIZE_STRING);
$formCtname = filter_var($_POST['formCtname'], FILTER_SANITIZE_STRING);
$formCtnum = filter_var($_POST['formCtnum'], FILTER_SANITIZE_STRING);
$formEmail = filter_var($_POST['formEmail'], FILTER_SANITIZE_STRING);
// CAPTCHA
require_once('captcha/recaptchalib.php');
$privatekey = "";
$resp = recaptcha_check_answer(
$privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]
);
// Form validation
$nameError = $formName == "";
$shipError = $formShip == "";
$cityError = $formCity == "";
$stateError = $formState == "";
$zipError = $formZip == "";
$ctnameError = $formCtname == "";
$ctnumError = $formCtnum == "";
$emailError = $formEmail == "";
$captchaError = !($resp->is_valid);
$hasError = $nameError || $shipError || $cityError || $stateError || $zipError || $ctnameError || $ctnumError || $emailError ;
if(!$hasError && !$captchaError) {
$headers = 'From: '.$formName.' <'.$formEmail.'>' . "\r\n";
$headers .= 'Reply-To: ' . $formEmail . "\r\n";
$headers .= 'Return-Path: ' . $formEmail . "\r\n";
$headers .= 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$body =
"
<p><b>Company Name: </b>$formName</p>
<p><b>Pickup Address: </b>$formShip</p>
<p><b>Pickup City: </b>$formCity</p>
<p><b>Pickup State: </b>$formState</p>
<p><b>Pickup Zip: </b>$formZip</p>
<p><b>Contact Name: </b>$formCtname</p>
<p><b>Contact Phone: </b>$formCtnum</p>
<p><b>Contact Email: </b>$formEmail</p><br>
";
mail(
"info@website.com",
"A new request from website.com!",
$body,
$headers
);
header("location: ".$goto_after_mail);
} else {
echo "<p>There was an error submitting the form. Please check all the marked fields.</p>";
if ($captchaError) {
echo "<p>Captcha error. Please type the checkwords again.</p>";
}
}
}
?>
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'clean'
};
</script>
<div class="col-sm-12">
<form id="contactForm" action="" method="post">
<div class="control-group<?php if ($nameError) echo " error"; ?>">
<label class="control-label" for="formName"><strong>Company Name</strong></label>
<div class="controls">
<input type="text" name="formName" value="<?php echo $formName; ?>">
</div>
</div>
<div class="control-group<?php if ($shipError) echo " error"; ?>">
<label class="control-label" for="formShip"><strong>Address for Pickup</strong></label>
<div class="controls">
<input type="text" name="formShip" value="<?php echo $formShip; ?>">
</div>
</div>
<div class="col-sm-4">
<div class="control-group<?php if ($cityError) echo " error"; ?>">
<label class="control-label" for="formCity"><strong>City</strong></label>
<div class="controls">
<input type="text" name="formCity" value="<?php echo $formCity; ?>">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="control-group<?php if ($stateError) echo " error"; ?>">
<label class="control-label" for="formState"><strong>State</strong></label>
<div class="controls">
<input type="text" name="formState" value="<?php echo $formState; ?>">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="control-group<?php if ($zipError) echo " error"; ?>">
<label class="control-label" for="formZip"><strong>Zip</strong></label>
<div class="controls">
<input type="text" name="formZip" value="<?php echo $formZip; ?>">
</div>
</div>
</div>
<div class="control-group<?php if ($ctnameError) echo " error"; ?>">
<label class="control-label" for="formCtname"><strong>Contact Name</strong></label>
<div class="controls">
<input type="text" name="formCtname" value="<?php echo $formCtname; ?>">
</div>
</div>
<div class="control-group<?php if ($ctnumError) echo " error"; ?>">
<label class="control-label" for="formCtnum"><strong>Contact Number</strong></label>
<div class="controls">
<input type="text" name="formCtnum" value="<?php echo $formCtnum; ?>">
</div>
</div>
<div class="control-group<?php if ($emailError) echo " error"; ?>">
<label class="control-label" for="formEmail"><strong>Contact Email</strong></label>
<div class="controls">
<input type="email" name="formEmail" value="<?php echo $formEmail; ?>">
</div>
</div>
<br>
<div class="control-group">
<div class="controls">
<?php
// load recaptcha file
require_once('captcha/recaptchalib.php');
// enter your public key
$publickey = "-";
// display recaptcha test fields
echo recaptcha_get_html($publickey);
?>
</div>
</div>
<div class="control-group">
<div class="controls">
<br />
<input type="submit" class="btn btn-info" value="Go To Step 2" tabindex="5" id="submit" name="submit">
<a href="step2.html">Click Here to go to Step 2</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section> 
我正在使用angular-google-maps库。我这样装载infowindows：
<div style="cursor: default; position: absolute; width: 327px; height: 68px; left: 25px; top: 135px; z-index: 135;">
<div style="position: absolute; left: 0px; top: 0px;">
<div
style="width: 0px; height: 0px; border-right: 10px solid transparent; border-left: 10px solid transparent; border-top: 24px solid rgba(0, 0, 0, 0.0980392); position: absolute; left: 154px; top: 68px;">
</div>
<div
style="position: absolute; left: 0px; top: 0px; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; width: 327px; height: 68px; display: none; background-color: rgba(0, 0, 0, 0.2);">
</div>
<div style="border-top-width: 24px; position: absolute; left: 154px; top: 65px;">
<div style="position: absolute; overflow: hidden; left: -6px; top: -1px; width: 16px; height:
30px;">
<div style="position: absolute; left: 6px; transform: skewX(22.6deg); transform-origin: 0px 0px
0px; height: 24px; width: 10px; box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 6px; background-color:
rgb(255, 255, 255);"></div>
</div>
<div style="position: absolute; overflow: hidden; top: -1px; left: 10px; width: 16px; height:
30px;">
<div style="position: absolute; left: 0px; transform: skewX(-22.6deg); transform-origin: 10px 0px
0px; height: 24px; width: 10px; box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 6px; background-color:
rgb(255, 255, 255);"></div>
</div>
</div>
<div style="position: absolute; left: 1px; top: 1px; border-radius: 2px; width: 325px; height:
66px; display: none; background-color: rgb(255, 255, 255);"></div>
</div>
<div
class="gm-style-iw" style="top: 9px; position: absolute; left: 15px; width: 297px;">
<div style
="display: inline-block; overflow: auto; max-height: 390px; max-width: 274px;">
<div class=
"iw-container" style="opacity: 1;">
<div class="iw-title ng-binding">
Estás
aquí
</div>
< !--ngIf
:
!m.aqui-- >
</div>
</div>
</div>
<div
style="width: 13px; height: 13px; overflow: hidden; position: absolute; opacity: 0.7; right: 12px; top: 10px; z-index: 10000;">
<img src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt6.png" draggable="false"
style="position: absolute; left: -2px; top: -336px; width: 59px; height: 492px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
</div>
<img src="http://maps.gstatic.com/mapfiles/transparent.png" draggable="false"
style="width: 37px; height: 37px; -webkit-user-select: none; border: 0px; padding: 0px; margin:0px; position: absolute; right: 0px; top: -2px; z-index: 10001; cursor: pointer;">
</div>
打开InfoWindow之后，我执行这些行以更改某些样式：
<ui-gmap-window options="m.window.options" closeClick="closeClick()">
<div class="iw-container">
<div class="iw-title">
{{m.window.title}}
</div>
<div class="iw-body" ng-if="!m.aqui">
<p>
<strong>Dirección: </strong>{{m.window.direccion}}<br/>
<strong>Horarios: </strong>{{m.window.horarios}}</p>
</div>
</div>
</ui-gmap-window>
这一行来自本教程：
http://en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html
但是当我尝试移除infowindow右侧的空白区域时，它无法正常工作。 已经尝试了几个小时，无法弄清楚如何得到我想要的东西。 希望你能帮帮我
2 个答案:
答案 0 :(得分：0)
我是这样做的，您可以尝试。具有动态标记的动态信息窗口。
Index.cshtml
@{
Layout = null;
}
<html>
<head>
<style>
#map-canvas {
margin: 0;
padding: 0;
height: 400px;
max-width: none;
}
.gm-style-iw {
width: 350px !important;
/*top: 0px !important;
left: 0px !important;
background-color: #fff;
box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
border: 1px solid rgba(72, 181, 233, 0.6);
border-radius: 10px 10px 10px 10px;*/
}
#iw-container {
margin-bottom: 10px;
}
#iw-container .iw-title {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 22px;
font-weight: 400;
padding: 20px;
background-color: #39ac73;
color: white;
margin: 2px;
border-radius: 2px 2px 0 0;
}
#iw-container .iw-content {
font-size: 13px;
line-height: 18px;
font-weight: 400;
margin-right: 1px;
padding: 15px 5px 20px 15px;
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
#map-canvas img {
max-width: none !important;
}
.iw-subTitle {
font-size: 16px;
font-weight: 700;
padding: 5px 0;
}
.infoDiv {
height: 200px;
width: 300px;
-webkit-user-select: none;
background-color: white;
}
.iw-bottom-gradient {
position: absolute;
width: 326px;
height: 25px;
bottom: 10px;
right: 18px;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
</style>
</head>
<body>
<div id="map-canvas" style="width: 1800px; height: 1500px">
</div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=APIKEY"></script>
<script type="text/javascript">
var markers = @Html.Raw(ViewBag.Markers);
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
description: data.description,
icon: "http://maps.google.com/mapfiles/ms/icons/green-dot.png",
animation: google.maps.Animation.DROP,
});
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
strokeColor: '#FFFFFF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FFFFFF',
fillOpacity: 0.35,
map: map,
center: myLatlng,
radius: 19999.45454,
position: myLatlng,
draggable: false
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent('<div id="iw-container">' +
'<div class="iw-title">' + data.title + "</div>" + '<div class="iw-content">'
+ "<p>" + data.description + "</p>"+'<img src="http://maps.marnoto.com/en/5wayscustomizeinfowindow/images/vistalegre.jpg" alt="Porcelain Factory of Vista Alegre" height="115" width="83">'
+'<div class="iw-bottom-gradient"></div>');
//infoWindow.setContent(data.title);
//infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
</body>
</html>
控制器：
namespace Map.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
{
string markers = "[";
string conString = ConfigurationManager.ConnectionStrings["PTS"].ConnectionString;
SqlCommand cmd = new SqlCommand("SELECT * FROM ProjeIlani");
using (SqlConnection con = new SqlConnection(conString))
{
cmd.Connection = con;
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
markers += "{";
markers += string.Format("'title': '{0}',", sdr["Adres"]);
markers += string.Format("'lat': '{0}',", sdr["Enlem"]);
markers += string.Format("'lng': '{0}',", sdr["Boylam"]);
markers += string.Format("'description': '{0}'", sdr["Aciklama"]);
markers += "},";
}
}
con.Close();
}
markers += "];";
ViewBag.Markers = markers;
return View();
}
}
}
}
答案 1 :(得分：-1)
本文应该为您提供所需的一切，包括调整边距和关闭按钮。
http://en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？