gpt4 book ai didi

javascript - 当鼠标悬停在 div 列上时如何在 map 上显示位置

转载 作者:行者123 更新时间:2023-11-30 06:28:34 25 4
gpt4 key购买 nike

我有一个页面,其中左侧信息来自数据库,例如公司名称、其详细信息、地址。在右侧,我有一张 map ,显示从数据库中获取的地址标记。现在我想在鼠标悬停在左侧信息时在 map 上显示标记,其地址存储在数据库中。

最佳答案

你可以这样做,

对于 v3

//start of loop for creating markers
markersArray[param._id] = r; // param._id will be some unique id of your result set
google.maps.event.addListener(r, 'click', function() {
param._infowindow.close(); // close infowindow
load_content(map,this,param._infowindow,param._id); // function to load the content from database
});
// end of loop
function load_content(map,marker,infowindow,id)
{
return $.ajax({
type: "POST",
url: "yourscript.php",
data:{
'id':id
},
success: function(data){// function to be called if the request succeeds
infowindow.setContent(data); //set the contents on infowindow
infowindow.setOptions({
position: marker.getPosition()
});
infowindow.open(map, marker);
}
});
}
function infoOpen(id) // id of the result
{
google.maps.event.trigger(markersArray[id],'click'); // triggers click event of marker
}

HTML

<div onclick="infoOpen('<?= $result_id ?>', '1');">$address1</div><!-- $result_id is id of each result--> 
<div onclick="infoOpen('<?= $result_id ?>', '1');">$address2</div><!-- $result_id is id of each result-->
<div onclick="infoOpen('<?= $result_id ?>', '1');">$address3</div><!-- $result_id is id of each result-->
<div onclick="infoOpen('<?= $result_id ?>', '1');">$address4</div><!-- $result_id is id of each result-->

举个例子

<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=en"></script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
function infoOpen(i)
{

google.maps.event.trigger(gmarkers[i], 'click');
}
var gmarkers = [];
var markers = [];
markers = [
['0', 'Marker 1', 13.988719, 100.617909],
['1', 'Marker 2', 13.662811, 100.43758],
['2', 'Marker 3', 13.744961, 100.535073],
['3','Marker 4', 13.801981, 100.613864],
['4', 'Marker 5', 13.767507, 100.644024]];

$(document).ready(function () {
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};

var map = new google.maps.Map(document.getElementById("map"), myOptions);
var image = new google.maps.MarkerImage('img/marker.png',
new google.maps.Size(65, 32),
new google.maps.Point(0, 0),
new google.maps.Point(18, 42));
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();

for (i = 0; i < markers.length; i++) {
var pos = new google.maps.LatLng(markers[i][2], markers[i][3]);
var content = markers[i][1];
bounds.extend(pos);
marker = new google.maps.Marker({
position: pos,
map: map
});
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, content) {
return function() {
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker, content));
}


map.fitBounds(bounds);
});
</script>
<style>
body {
text-align: center
}
#map {
width:640px;
height: 480px;
border:6px solid #6f5f5e;
margin:20px auto 30px auto;
}
</style>
</head>
<body>
<div>
<a href="javascript:void(0);" onclick="infoOpen('0');">mark 1</a> <a href="javascript:void(0);" onclick="infoOpen('1');">mark 2</a> <a href="javascript:void(0);" onclick="infoOpen('2');">mark 3</a> <a href="javascript:void(0);" onclick="infoOpen('3');">mark 4</a> <a href="javascript:void(0);" onclick="infoOpen('4');">mark 5</a>

<div id="map">&nbsp;</div>
</div>
</body>
</html>

关于javascript - 当鼠标悬停在 div 列上时如何在 map 上显示位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19442151/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com