Question

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

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

Answer 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>

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

1 个答案: