单击谷歌地图标记时运行脚本答案

【问题标题】：Running a script when clicking on a google map marker单击谷歌地图标记时运行脚本
【发布时间】：2014-03-06 09:25:00
【问题描述】：

我希望我网站的用户能够点击 Google 地图标记并被重定向到与该标记相关的页面。标记代表酒店，相关页面显示有关特定酒店的各种信息。此页面是使用对 SQL 数据库的 PHP 调用创建的，因此我不能简单地将 URL 提供给标记，因为它需要知道点击了哪个酒店才能使用相关信息填充页面。

是否可以在单击标记而不是重定向到 URL 时运行脚本？这样我就可以在脚本中使用 PHP 调用数据库并创建页面并加载它。我需要的只是一些从标记发送到脚本的（隐藏）信息，这些信息将确定点击了哪个酒店标记。

【问题讨论】：

是的，可以在单击标记时运行脚本。见the documentation
我不确定你会得到什么。您的标记不知道它们代表的是哪家酒店，因此您必须查询数据库才能知道这一点？
@sabotero 标记是使用 SQL 表中的纬度/经度数据生成的。当它们被单击时，我想返回该表以检索有关该特定酒店的其余信息并将其显示在单独的网页上。可行吗？
嗯，是的，但是您可以在创建标记时将其余信息至少放在可以在 de url 中传递的“hote_id”，例如：yourhotelsurl.com/hotels?id=hotel_id
@Giovanni 请在下面的回答中查看我建议的方法。如果您认为没有帮助，请发布一些代码以便能够进一步提供帮助！

标签： javascript php jquery google-maps google-maps-api-3

【解决方案1】：

我建议看看下面示例代码中公开的不同方法。

基本上，您仍然可以从数据库中获得纬度/经度信息，但同时您会获得其他有用的信息。

我在示例中模拟我们从数据库中获取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>

【讨论】：