我希望我网站的用户能够点击 Google map 标记并重定向到与该标记相关的页面。标记代表酒店，相关页面显示有关特定酒店的各种信息。此页面是使用 PHP 调用 SQL 数据库创建的，因此我不能简单地向标记提供 URL，因为它需要知道单击了哪家酒店才能使用相关信息填充页面。
是否可以在单击标记时运行脚本而不是重定向到 URL？这样我就可以在脚本中使用 PHP 调用数据库并创建页面并加载它。我需要的只是从标记发送到脚本的一些(隐藏)信息，这些信息将确定哪个酒店标记被点击。
最佳答案
我建议查看下面示例代码中公开的不同方法。
基本上，您仍然可以从数据库中获取纬度/经度信息，但同时您还可以获取其他有用信息。
我在示例中模拟我们从数据库获取 id 信息，因为通常情况下，这应该足够了，但您也可以获取您可能需要的其他信息。
我们创建一个封装所有信息的对象 (MyMarker)，以及一个集合对象 (MyMarkerCollection) 来帮助管理多个 MyMarker 对象.
然后，当您单击标记时，您可以通过 URL 传递有用信息，然后您就可以构建页面，无需向服务器发送一次查询，无需任何成本。
<!DOCTYPE html>
<html>
<head>
<title>Handling markers collection demo</title>
<style type="text/css">
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0;
padding: 0;
}
#map-container
{
height: 100%;
width: 100%;
min-width:500px;
min-height:300px;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>
<body>
<div id="map-container"></div>
<script type="text/javascript" language="javascript">
var _map;
$(document).ready(function () {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
_map = new google.maps.Map($("#map-container")[0], mapOptions);
Load1();
});
// information from data base
var points = [{lat:1.2345, lng: 3.45465, id: 1}, {lat:-1.45467, lng: 3.54645, id:2}, {lat:2.2345, lng: -4.45465, id:3}, {lat:-2.45467, lng:-4.54645, id:4}];
//very little global variables (only what you really need to be global)
var MarkersCollection;
// the custom marker object with all what you need to show along with your marker
// and some methods in the prototype that help to manage the object
function MyMarker(point, id, info) {
//for the closure
var that = this;
that.id = id;
that.point = point; // your point
that.marker = new google.maps.Marker({ position: that.point });
that.info = info; // other information if you need it
// add the listener to click
google.maps.event.addListener(that.marker, "click", function() {
// call onMarkerClick with variable 'that' being the local keyword 'this' within onMarkerClick method
that.onMarkerClick.call(that);
});
}
MyMarker.prototype.addMarkerToMap = function (map) {
this.marker.setMap(map);
};
// expose getPosition method
MyMarker.prototype.getPosition = function () {
return this.marker.getPosition();
};
MyMarker.prototype.onMarkerClick = function () {
//go to the url
window.location.href = 'http://yourhotels.com/hotel.php?id=' + this.id;
// or open link in a new window
window.open('http://yourhotels.com/hotel.php?id=' + this.id);
};
MyMarker.prototype.removeMarkerFomMap = function () {
this.marker.setMap(null);
};
// the collection of custom markers with the methos that help to manage the collection
function MyMarkerCollection() {
this.collection = [];
}
MyMarkerCollection.prototype.add = function (marker) {
this.collection.push(marker);
};
MyMarkerCollection.prototype.removeAllMarkers = function () {
for (var i = 0; i < this.collection.length; i++) {
this.collection[i].removeMarkerFomMap();
}
};
MyMarkerCollection.prototype.focusAllMarkers = function () {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < this.collection.length; i++) {
bounds.extend(this.collection[i].getPosition());
}
_map.fitBounds(bounds);
};
// your load function
function Load(points) {
if (!MarkersCollection) {
MarkersCollection = new MyMarkerCollection();
}
else {
MarkersCollection.removeAllMarkers();
}
for (var i = 0; i < points.length; i++) {
var point = new google.maps.LatLng(points[i].lat, points[i].lng),
id = points[i].id; // the id
// create markers
var marker = new MyMarker(point, id, "your html");
marker.addMarkerToMap(_map);
MarkersCollection.add(marker);
}
// focus all markers
MarkersCollection.focusAllMarkers();
}
// for the demo sake
function Load1() {
Load(points);
}
function Remove(){
if(MarkersCollection)MarkersCollection.removeAllMarkers();
}
</script>
</body>
</html>
关于javascript - 单击谷歌地图标记时运行脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21653626/