我整天搜索过,但没有找到解决方案。如果有人看到我的错误,我会很高兴。我尝试用标记显示地图,这会在点击时打开信息窗口。我之前做了很多次。 在infowindow内部,我想显示更改为Google进行路线规划的选项。
用于查找和链接到Google的功能很有效,但是在不显示标记的情况下会显示地图,但会直接显示infowindow并打开。
您可以在此处查看地图:https://jsfiddle.net/fuy8n47d/
到目前为止,这是我的代码:
<div class="mapwrapper">
<div id="map_canvas"></div>
<!-- STARTING MAP DEFINITION -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=de"></script>
<script type="text/javascript">
var map;
var start = new google.maps.LatLng(50.6472671, 8.4210159);
var geocoder;
geocoder = new google.maps.Geocoder();
// Initalize your map
function initialize() {
var mapOptions = {
zoom:16,
scrollwheel: false,
panControl: true,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: start
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
// Collect entered data and open Google Maps in a new browser tab
function showRoute() {
var start = document.getElementById("address").value;
var dest_url = "http://maps.google.de/maps?saddr="+start+"&daddr="+destination;
window.open(dest_url, '_blank');
}
// Define infobox widget
function codeAddress() {
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(50.6472671, 8.4210159 ),
title:"Info Window title goes here"
});
var address = destination;
geocoder.geocode( { 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var coordInfoWindow = new google.maps.InfoWindow({
content: "<h2>Your Way to Us</h2><p>Enter your location<br>and press 'FIND'</p><input id='address' type='textbox' value='' style='border: 1px solid #f0f0f0;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;'> <input type='button' value='FIND' onClick='showRoute();'>",
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode not available: " + status);
}
});
google.maps.event.addListener(marker, 'click', function() {
coordInfoWindow.open(map,marker);
});
}
// Automatic geo localisation
function codeLatLng() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
geocoder.geocode({'latLng': pos}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
document.getElementById("address").value = results[1].formatted_address;
} else {
// alert("No results found");
}
} else {
// alert("Geocoder failed due to: " + status);
}
});
}, function() {
//
});
}
}
// DO NOT CHANGE CODE ABOVE!
// Change custom parameters starting from here:
var destination = "Mainzer Dom, Markt, Mainz"; // destination, your address
document.getElementById('map_canvas').style.width = '100%'; // map width
document.getElementById('map_canvas').style.height = '700px'; // map height
initialize();
codeAddress();
codeLatLng();
</script>
<!-- END OF MAP DEFINITION -->
</div>
我有什么不对,有人知道吗?我很感谢你的帮助, 非常感谢,
托马斯
答案 0 :(得分:0)
好的,因为我在这篇文章上没有得到任何帮助,我帮助了自己;-) 至于我不是GoopleMaps API专家,我找到了一个适用于我的项目的解决方案。我现在错过了自动地理定位,但是标记和infowindow现在正如我所期望的那样。 我发布此代码并希望,它可以帮助有类似问题的人。 这是:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(49.9988999, 8.2717569 ),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
panControl: true,
draggable: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(49.9988999, 8.2717569 ),
title:"Info Window title goes here"
});
// Adjust styling of info window depending on the map height and webpage design
var contentString = '<div id="mapinfo_box" style="color:#666;max-width:280px;">'+
'<h1 id="mapinfo_h1">Info Window title goes here, too</h1>'+
'<div id="mapinfo_body">'+
'<p style="font-size:16px;margin-bottom:15px;">Examplestreet 6 <br />12345 ExampleCity</p>'+
'<form action="http://maps.google.com/maps" method="get" target="_blank"><label for="saddr">Enter your location</label><br />'+
'<input id="saddr" type="text" name="saddr" /><input type="hidden" name="daddr" value="Staatstheater Mainz - Großes Haus" />'+
'<input type="submit" value="Get Route" /></form>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'resize', initialize);
google.maps.event.addDomListener(window, 'load', initialize)
&#13;
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#sec4 {
width: 100%;
height: 50%;
}
#map_canvas {
width: 100%; height: 600px;
}
&#13;
<!-- Insert Googlemap Api -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=de"></script>
<div id="sec4" onload="initialize()">
<div id="map_canvas"></div>
</div>
&#13;
好的,我肯定不是地图API专家,但代码适用于我,地图是响应式的。如果有人看到错误,请随时纠正我。