javascript - 强制 Google Maps API 仅使用纬度/经度值 - 修改预制 JS

Question

我正在为房地产网站使用 Wordpress 主题，该主题具有以下功能:添加列表时，主题将使用列表标题(街道地址)以及“城市”和“州”标签来设置列表 map 图钉。也可以默认lat/long(新建listing时可以手动添加)

由于想要为列表使用描述性标题而不是街道地址，我希望 map 仅根据纬度/经度放置图钉。当我使用描述性标题时，列表 map 不会加载 - 因此 map 在无法对描述性标题进行地理编码后不会默认为纬度/经度。

映射代码如下(我不是专家所以一直在尝试很多变化，所有这些都破坏了映射功能!)

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/realestate_3/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: 3,
            disableAutoPan: true
        });

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

        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;

}());

值得注意的是，上面的代码也适用于在主页 map 上放置多个列表标记的功能。最好我希望 map 总是从手动添加的纬度/经度(甚至是主页)填充，但我无法在不破坏 map 的情况下实现它......

如有任何信息，我们将不胜感激。

Answer 1

如果您能用一些解释您找到的解决方案的代码发布您的问题的答案，以更全面地帮助其他有类似问题的人，那就太好了。我想我会分享我最近解决类似问题的方法。

我没有使用帖子标题来存储地址，而是在这些帖子上创建了一个自定义元框，请求街道地址、城市名称和州。我使用一个函数连接到 save_post 操作，该函数使用 Google Maps Geocode API 来查找纬度和经度:

$base_url = "http://maps.googleapis.com/maps/api/geocode/json?";
$address=urlencode($_POST['address']); // address was the name of the field in the meta box
$request_url = $base_url . "&address=" . urlencode($address).'&sensor=false';
$query = lookup($request_url); 
$results=json_decode($query, true);
$lat = $results["results"][0]["geometry"]["location"]["lat"];
$lng = $results["results"][0]["geometry"]["location"]["lng"];
    //now that we have the latitude and longitude, we can save them as post meta
update_post_meta($postid, 'lat', $lat);
update_post_meta($postid, 'long', $lng);

请注意，这使用了一个名为 geocode 的函数来实际检索纬度和经度值。我找不到我最初学习如何制作此函数的教程，但这里有一个(该函数被称为“查找”)://lookup 是一个使用 curl 发送地理编码请求的函数，您可以找到这里的一个例子:http://www.andrew-kirkpatrick.com/2011/10/google-geocoding-api-with-php/

然后，在显示 map 时，您可以在 javascript 中创建新的纬度和经度时检索这些值:

var latlng = new google.maps.LatLng(<?php get_post_meta($postid, 'lat'); ?>,<?php get_post_meta($postid, 'long'); ?>)