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

Question

我使用Wordpress主题作为房地产网站，主题具有以下功能： 当您添加列表时，主题将会使用列表标题（街道地址）以及“城市”和“州”标记来设置列表地图引脚。它也可以默认为lat/long（你可以在创建一个新的列表时手动添加它）

由于想要为列表使用描述性标题而不是街道地址，我希望地图放置只基于lat/long的引脚。当我使用描述性标题时，列表地图不会加载 - 所以地图在无法对描述性标题进行地理编码之后，并未默认为纬度/经度。

映射代码如下（我不是专家，所以一直在尝试了许多变化，所有这些都打破了mappping功能！）

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; 

}（））;

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

Answer 1

如果您用一些解释您找到的解决方案的代码发布问题答案，以更充分地帮助其他类似问题的人，那将是非常好的。我想我会分享我最近解决类似问题的方式。

我没有使用帖子标题来存储地址，而是在这些帖子上创建了一个自定义元框，要求输入街道地址，城市名称和州名。我迷上与一个功能，使用谷歌地图API地理编码查找纬度和经度save_post行动：

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

注意，这里使用一个函数调用的地址解析到实际检索的纬度和经度值。我无法找到我最初学习如何制作此功能的教程，但这里是一个（其中函数称为'lookup'）：// lookup是一个使用curl发送地理编码请求的函数，您可以查找这里一个例子：http://www.andrew-kirkpatrick.com/2011/10/google-geocoding-api-with-php/

然后，显示地图时，你可以在你的JavaScript创建新的纬度和经度时检索这些值：

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