Question

我刚刚注册以寻求谷歌地图的帮助。我正在开展一个项目，允许我在我的网站上的谷歌地图中插入各种房屋广告。我不知道为什么这个位置永远不正确，起初我尝试使用下面的代码......

然后我不得不删除变量city，street，state和zipcode为什么他们参加战争。但没有解决任何问题。所以转到链接以更好地了解情况。生成的代码位于地图div顶部的脚本标记中。

<script>var defaultmapcenter = {mapcenter: "<?php echo $ct_options['ct_home_map_center']; ?>"}; google.maps.event.addDomListener(window, 'load', function(){ estateMapping.init_property_map(property_list, defaultmapcenter); });</script>

<script>
            var property_list = [];
            var default_mapcenter = [];

            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $count++; ?>

                var property = {
                    thumb: "<?php ct_first_image_tn_map() ?>",
                    price: "<?php currency(); ?><?php map_pin_price(); ?>",
                    fullPrice: "<?php currency(); ?><?php listing_price(); ?>",
                    bed: "<?php beds(); ?>",
                    bath: "<?php baths(); ?>",
                    size: "<?php echo get_post_meta($post->ID, "_ct_sqft", true); ?> <?php sqftsqm(); ?>",
                    street: "<?php the_title(); ?>",
                    city: "<?php city(); ?>",
                    state: "<?php state(); ?>",
                    zip: "<?php zipcode(); ?>",
                    latlong: "<?php echo get_post_meta(get_the_ID(), "_ct_latlng", true); ?>",
                    permalink: "<?php the_permalink(); ?>",
                    agentThumb: "<?php echo get_template_directory_uri(); ?>/img_resize/timthumb.php?src=<?php the_author_meta('ct_profile_url'); ?>&w=40&zc=1'",
                    agentName: "<?php the_author_meta('first_name'); ?> <?php the_author_meta('last_name'); ?>",
                    agentTagline: "<?php if(get_the_author_meta('tagline')) { the_author_meta('tagline'); } ?>",
                    agentPhone: "<?php if(get_the_author_meta('office')) { the_author_meta('office'); } ?>",
                    agentEmail: "<?php if(get_the_author_meta('email')) { the_author_meta('email'); } ?>",
                    isHome: "<?php if(is_home()) { echo "false"; } else { echo "true"; } ?>",
                    commercial: "<?php if(has_type('commercial')) { echo 'commercial'; } ?>"
                }
                property_list.push(property);

        <?php     
            endwhile; endif;
            wp_reset_query();
        ?>
            </script>
            <script>var defaultmapcenter = {mapcenter: "<?php echo $ct_options['ct_map_center']; ?>"}; google.maps.event.addDomListener(window, 'load', function(){ estateMapping.init_property_map(property_list, defaultmapcenter); });</script>



**Javascript:**
---------------

    var estateMapping = (function () {
        var self = {},
            marker_list = [],
            open_info_window = null,
            x_center_offset = 0, // x,y offset in px when map gets built with marker bounds
            y_center_offset = -100,
            x_info_offset = 0, // x,y offset in px when map pans to marker -- to accomodate infoBubble
            y_info_offset = -100;

        function build_marker(latlng, property) {
            var marker = new MarkerWithLabel({
                map: self.map, 
                draggable: false,
                flat: true,
                labelContent: property.price,
                labelAnchor: new google.maps.Point(22, 0),
                labelClass: "label", // the CSS class for the label
                labelStyle: {opacity: 1},
                icon: 'wp-content/themes/reale/images/blank.png',   
                position: latlng
                });

                self.bounds.extend(latlng);
                self.map.fitBounds(self.bounds);
                self.map.setCenter(convert_offset(self.bounds.getCenter(), x_center_offset, y_center_offset));

                var infoBubble = new InfoBubble({
                    maxWidth: 275,
                    content: contentString,
                    borderRadius: 4,
                    disableAutoPan: true
                });

                var residentialString = '';
                if(property['commercial'] != 'commercial') {
                    var residentialString='<p class="details">'+property.bed+'&nbsp;'+property.bath+'';
                }

                var contentString =
                '<div class="info-content">'+
                '<a href="'+property.permalink+'"><img class="left" src="'+property.thumb+'" /></a>'+
                '<div class="listing-details left">'+
                '<h3><a href="'+property.permalink+'">'+property.street+'</a></h3>'+
                '<p class="location">'+property.city+', '+property.state+'&nbsp;'+property.zip+'</p>'+
                '<p class="price"><strong>'+property.fullPrice+'</strong></p>'+residentialString+', '+property.size+'</p></div>'+
                '</div>';

                var tabContent =
                '<div class="info-content">'+
                '<img class="left" src="'+property.agentThumb+'" />'+
                '<div class="listing-details left">'+
                '<h3>'+property.agentName+'</h3>'+
                '<p class="tagline">'+property.agentTagline+'</p>'+
                '<p class="phone"><strong>Tel:</strong> '+property.agentPhone+'</p>'+
                '<p class="email"><a href="mailto:'+property.agentEmail+'">'+property.agentEmail+'</a></p>'+
                '</div>'+
                '</div>';

                infoBubble.addTab('Details', contentString);
                infoBubble.addTab('Contact Agent', tabContent);

                google.maps.event.addListener(marker, 'click', function() {
                    if(open_info_window) open_info_window.close();

                    if (!infoBubble.isOpen()) {
                        infoBubble.open(self.map, marker);
                        self.map.panTo(convert_offset(this.position, x_info_offset, y_info_offset));
                        open_info_window = infoBubble;
                    }
                });
        }

        function geocode_and_place_marker(property) {
           var geocoder = new google.maps.Geocoder();
           var address = property.street+', '+property.city+' '+property.state+', '+property.zip;

               //If latlong exists build the marker, otherwise geocode then build the marker
               if (property['latlong']) {
                   var lat = parseFloat(property['latlong'].split(',')[0]),
                        lng = parseFloat(property['latlong'].split(',')[1]);
                    var latlng = new google.maps.LatLng(lat,lng);
                    build_marker(latlng, property);

               } else {
                   geocoder.geocode({ address : address }, function( results, status ) {
                       if(status == google.maps.GeocoderStatus.OK) {
                            var latlng = results[0].geometry.location;
                            build_marker(latlng, property);
                        }
                    });
                }
        }

        function init_canvas_projection() {
            function CanvasProjectionOverlay() {}
            CanvasProjectionOverlay.prototype = new google.maps.OverlayView();
            CanvasProjectionOverlay.prototype.constructor = CanvasProjectionOverlay;
            CanvasProjectionOverlay.prototype.onAdd = function(){};
            CanvasProjectionOverlay.prototype.draw = function(){};
            CanvasProjectionOverlay.prototype.onRemove = function(){};

            self.canvasProjectionOverlay = new CanvasProjectionOverlay();
            self.canvasProjectionOverlay.setMap(self.map);
        }

        function convert_offset(latlng, x_offset, y_offset) {
            var proj = self.canvasProjectionOverlay.getProjection();
            var point = proj.fromLatLngToContainerPixel(latlng);
            point.x = point.x + x_offset;
            point.y = point.y + y_offset;
            return proj.fromContainerPixelToLatLng(point);
        }

        self.init_property_map = function (properties, defaultmapcenter) {
            var options = {
                zoom: 1,
                center: new google.maps.LatLng(defaultmapcenter.mapcenter),
                mapTypeId: google.maps.MapTypeId.ROADMAP, 
                disableDefaultUI: true,
                streetViewControl: false
            };

            self.map = new google.maps.Map( document.getElementById( 'map' ), options );
            self.bounds = new google.maps.LatLngBounds();
            init_canvas_projection();

            //wait for idle to give time to grab the projection (for calculating offset)
            var idle_listener = google.maps.event.addListener(self.map, 'idle', function() {
                for (i=0;i<properties.length;i++) {
                    geocode_and_place_marker(properties[i]);
                }
                google.maps.event.removeListener(idle_listener);
            });

        }

        return self;
    }());

Answer 1

我从您的实际网站上获取了几个属性对象并简化了代码。这似乎正确地定位了标记。您的问题中的代码太多，无法确切地告诉您哪里出错，但如果您从这个演示开始，您可以慢慢添加您的功能并查看它的中断位置。

演示：

输出：

脚本：

var property_list = [
        {latlong: "36.738884,15.022705"},
        {latlong: "42.608127,14.067408"}
    ],
    options = {
        zoom: 4,
        center: new google.maps.LatLng( 36.73, 15.02 ),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    },
    map = new google.maps.Map( 
        document.getElementById( 'map-canvas' ), 
        options 
    );

for( var index = 0; index < property_list.length; index++ ) {
    var latlong = property_list[index]['latlong'].split(','),
        latlng = new google.maps.LatLng( latlong[0], latlong[1] ),
        marker = new google.maps.Marker( {position: latlng, map: map} );
    marker.setMap( map );
};

HTML：

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>

CSS：

#map-canvas { 
    height: 300px; 
    width: 500px;
}

Answer 2

您的标记和javascript代码没有任何问题，所有标记（除了一个）都放在正确的位置。

问题在于您的内容。你可能已经注意到265k标记的阴影比1k标记暗得多。这是因为在该标记后面有8个其他标记， 9个标记用相等的LatLng 定义。

仅显示1个标记，它是带有空latlong的标记。由于缺少属性street,city,state和zip，因此地理编码失败。

Answer 3

替换此行

var address = property.street+', '+property.city+' '+property.state+', '+property.zip+', '+property.country;

使用这些行删除空值

的字段

        var city    = (property.city.trim() != '')?property.city.trim()+',':'';
        var state   = (property.state.trim() != '')?property.state.trim()+',':''; 
        var country = (property.country.trim() != '')?property.country.trim():'';
        var address = city+state+country;

谷歌地图多个标记位置ZOOM ERROR

3 个答案:

输出：

脚本：

HTML：

CSS：