自定义谷歌地图标记和信息窗口答案

【问题标题】：Custom Google Maps Markers and Infowindow自定义谷歌地图标记和信息窗口
【发布时间】：2014-03-10 10:16:15
【问题描述】：

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

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

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

【问题讨论】：

问题是……？
如何使每个标记信息窗口动态化，即它们应该随每个标记而变化。

标签： google-maps google-maps-markers infowindow

【解决方案1】：

您需要在createMarker() 函数中创建信息窗口，以便信息窗口对于每个标记都是唯一的：

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);
}

【讨论】：

能否详细解释一下，先谢谢了。
回到你的链接，看来你已经实现了你想做的。我现在正在查看我的代码，它不应该对您的代码产生影响。因此，如果您按照我的建议实现了它，我会尝试解释，但如果您没有，我将删除我的答案，因为我认为它不会改变您代码中的内容。

【解决方案2】：

链接页面上的信息窗口有动态内容（目前是地址），我想你不需要地址作为内容。

目前位置数组具有以下结构。

[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() 打印数组。

【讨论】：