如何将Google Maps Infowindow框定位在顶部附近，并将样式设置为错误 [英] How to position Google Maps Infowindow box near the top and style as error
问题描述
我已经开发了这个 plunker示例：
点击查看带有消息的加拿大地图，查看infowindow。
Click on "View Canada Map with Message" to see the infowindow.
我想让infowindow位于地图边界的顶部附近或者在上部的中间。此外，我想将infowindow设置为带有错误指示器图标的错误消息。
I want the infowindow to be positioned near the top of the map boundary or in the middle of the upper part. Also, I want to style the infowindow to appear as error message with error indicator icon.
请参阅下面的示例代码：
See sample code below:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<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;
}
</style>
</head>
<body >
<input type="button" value="Init Map" onclick="initMap()">
<input type="button" value="View Canada Map with Message" onclick="viewCanadaWithMessage()">
<div id="map"></div>
<script>
var mapDiv = document.getElementById('map');
var map;
var infoWindow;
var geocoder ;
var map;
var palce;
function initMap() {
map = new google.maps.Map(mapDiv, {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
infoWindow = new google.maps.InfoWindow;
infoWindow.setPosition(map.getCenter());
infoWindow.setContent('This is the center of the map');
infoWindow.open(map);
geocoder = new google.maps.Geocoder();
}
//setTimeout(function(){initMap()}, 100);
function doLoad() {
}
function viewCanadaWithMessage() {
//geocoder.geocode({address:'Canberra, Australia'}, function(result, status){
geocoder.geocode({address:'Canada'}, function(result, status){
if (status == "OK") {
map.setCenter(result[0].geometry.location);
map.setZoom(3);
var infoWindow = new google.maps.InfoWindow;
infoWindow.setContent('<strong>How I can locate this info window to be near the top, approx in the middle between the top point and the middle point? I want this window to display <span style="color:red">error message</span> with error indicator icon.</strong>');
infoWindow.setPosition(map.getCenter());
infoWindow.open(map);
}
});
}
//google.maps.event.addDomListener(window, 'load', initMap);
document.onreadystatechange = function() {
if (document.readyState === 'complete') {
initMap();
google.maps.event.addDomListener(mapDiv, 'click', function() {
alert('clicked');
})
}
};
</script>
<script language="JavaScript" >
<!--
document.writeln("<script async defer src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyAh7w3_pTxbOFG3tT2P8ZDTwxDnp5A2GNw&callback=doLoad\"></script>");
//-->
</script>
</body>
</html>
如何计算靠近上方的位置（lat，lng），以及如何计算我可以将infowindow设计为一个错误消息吗？
How to calculate the position (lat, lng) which will be close to the upper side, and how I can style the infowindow to look like an error message?
推荐答案
我做了一些分析，并意识到我可以找到近似值
I did some analysis, and realized that I can find the approximate midpoint between the top and the center using this code snippet:
var center = JSON.parse(JSON.stringify(map.getCenter()));
var boundaries = JSON.parse(JSON.stringify(map.getBounds()));
var newPosition = {lat: center.lat + Math.abs(boundaries.north - center.lat) / 2.75, lng: center.lng};
infoWindow.setContent('<strong>How I can locate this info window to be near the top, approx in the middle between the top point and the middle point? I want this window to display <span style="color:red">error message</span> with error indicator icon.</strong>');
infoWindow.setPosition(newPosition);
See plnker sample here.
我希望这是正确的做法。请让我知道，如果你更好的解决方案。
I hope that this is the right way. Please let me know if you better solution.
现在，我需要将infowindow设置为错误。感谢您的帮助。
Now, I need to style the infowindow to appear as error. Appreciate your help.
这篇关于如何将Google Maps Infowindow框定位在顶部附近，并将样式设置为错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
