- 12, May 2024
- #1
Привет,
Пожалуйста, посмотрите мое кодирование на данный момент.
Я пытаюсь создать так, чтобы, когда указатель мыши наводит курсор на размещенный маркер и отображает информацию, он также отображает эту информацию в другом поле ( ) на той же странице.
Кажется, я не могу найти работающее решение.
Может ли кто-нибудь помочь или иметь предложения, пожалуйста?
Я пытаюсь создать так, чтобы, когда указатель мыши наводит курсор на размещенный маркер и отображает информацию, он также отображает эту информацию в другом поле ( ) на той же странице.
Кажется, я не могу найти работающее решение.
Может ли кто-нибудь помочь или иметь предложения, пожалуйста?
<!DOCTYPE html>
<!-- Google Maps and Places API -->
<script type="text/javascript" src="[URL='https://lumtu.com/yti/cwWWwc2VodHRwOi8vbWFwcy5nb29nbGVhcGlzLmNvbS9tYXBzL2FwaS9qcz9saWJyYXJpZXM9cGxhY2VzJnNlbnNvcj1mY1jc']http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false[/URL]"></script>
<!-- jQuery -->
<script src="[URL='https://lumtu.com/yti/agLLganNodHRwczovL2FqYXguZ29vZ2xlYXBpcy5jb20vYWpheC9saWJzL2pxdWVyeS8xLjcuMi9qcXVlcnkubWluWbu']https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js[/URL]"></script>
<script type="text/javascript">
var up206b = {};
var map;
function trace(message)
{
if (typeof console != 'undefined')
{
console.log(message);
}
}
up206b.initialize = function()
{
var latlng = new google.maps.LatLng(34.070264, -118.4440562);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
var geocoder = new google.maps.Geocoder();
up206b.geocode = function()
{
var addresses = [ $('#address').val(), $('#address2').val()];
addresses.forEach(function(address){
if(address){
geocoder.geocode( { 'address': address}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
}
</script>
<div style="top: 0; right: 0; width:380px; height: 500px; float:right; padding-left:10px; padding-right:10px;">
<h1 align="center">Map Search</h1>
<div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" >
<form >
<br>
Location 1 <input type="text" id="address">
<br>
<br>
Location 2
<input type="text" id="address2">
<br>
<br>
<input type="button" value="Submit" onClick="up206b.geocode()">
</form>
</div>
</div>
<div id="map_canvas" style="height: 500px; width: 500px; float:right"></div>
Код (разметка):