Question

我想创建一个谷歌地图，其中我想要显示的标记来自数据库，而infowindow数据也来自数据库，这显然与每个标记不同。我现在使用的代码是：

    <script type="text/javascript">
        var delay = 100;
        var infowindow = new google.maps.InfoWindow();
        var latlng = new google.maps.LatLng(21.0000, 78.0000);
        var mapOptions = {
            zoom: 5,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var geocoder = new google.maps.Geocoder();
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        var bounds = new google.maps.LatLngBounds();

        function geocodeAddress(address, next) {
            geocoder.geocode({address:address}, function (results,status){
                if (status == google.maps.GeocoderStatus.OK) {
                    var p = results[0].geometry.location;
                    var lat=p.lat();
                    var lng=p.lng();
                    createMarker(address,lat,lng);
                }else {
                    if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                        nextAddress--;
                        delay++;
                    } else {}
                }
                next();
            });
        }

        function createMarker(add,lat,lng) {
            var contentString = add;
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat,lng),
                map: map
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(contentString);
                infowindow.open(map,marker);
            });

            bounds.extend(marker.position);

        }

        <?php
            global $wpdb;
            $results = $wpdb->get_results("select * from $wpdb->postmeta where meta_value = 'Canada'");
            $num_rows = $wpdb->num_rows;
        ?>
            var locations = [
            <?php foreach ($results as $doc_meta_data) {
                echo "'";// . $doc_meta_data->meta_id;
                echo get_post_meta($doc_meta_data->post_id, 'address', true).",";
                echo get_post_meta($doc_meta_data->post_id, 'state', true).",";
                echo get_post_meta($doc_meta_data->post_id, 'country', true);
                echo "',";
            }?>
            ];

            var nextAddress = 0;
                function theNext() {
                    if (nextAddress < locations.length) {
                        setTimeout('geocodeAddress("'+locations[nextAddress]+'",theNext)', delay);
                        nextAddress++;
                    } else {
                        map.fitBounds(bounds);
                    }
                }
            theNext();
    </script>

如何添加make每个标记信息动态，即它应该来自管理面板。网址：http://intigateqatar.com/ozone/find-a-doc/

Answer 1

您需要在createMarker()函数中创建infowindow，以使每个标记的infowindows都是唯一的：

function createMarker(add,lat,lng) {
    var contentString = add;
    var marker = new google.maps.Marker({
       position: new google.maps.LatLng(lat,lng),
       map: map
    });

    var infowindow = new google.maps.InfoWindow({
       content: contentString
    });

    google.maps.event.addListener(marker, 'click', function() {
       infowindow.open(map, marker);
    });

    bounds.extend(marker.position);
}

Answer 2

链接页面上的InfoWindow有动态内容（目前是地址），我猜你不需要地址作为内容。

目前，locations-array具有以下结构。

[address1,address2,address3,....]

请求信息并创建一个具有以下结构的数组：

[[address1,info1],[address2,info2],[address3,info3],....]

将geocodeAddress()更改为以下内容：

 function geocodeAddress(details, next) {
        //details[0] is the address, pass it as address-property to geocode
        geocoder.geocode({address:details[0]}, function (results,status){
            if (status == google.maps.GeocoderStatus.OK) {
                var p = results[0].geometry.location;
                var lat=p.lat();
                var lng=p.lng();
                //details[1] is the info fetched from the DB, 
                //pass it as add-argument to createMarker()
                createMarker(details[1],lat,lng);
            }else {
                if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                    nextAddress--;
                    delay++;
                } else {}
            }
            next();
        });
    }

注意：回显单个变量不是一个好主意，任何一个地址（或信息）中的单引号都会导致脚本错误（并且有更多关键字符，例如换行符）。

使用值填充PHP数组，并使用json_encode()打印数组。

自定义Google地图标记和Infowindow

2 个答案: