javascript - 使用预测 API 数据更新的 HTML 模板

Question

以下脚本可以正常工作，但是我需要根据我搜索的城市使用来自预测 API 的数据更新“contentString”的内容：

var geocoder,
    map,
    button = $('button'),
    url = "https://api.forecast.io/forecast/APIKEY/";

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
    '<div id="bodyContent">'+
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the '+
    'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
    'south west of the nearest large town, Alice Springs; 450&#160;km '+
    '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
    'features of the Uluru - Kata Tjuta National Park. Uluru is '+
    'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
    'Aboriginal people of the area. It has many springs, waterholes, '+
    'rock caves and ancient paintings. Uluru is listed as a World '+
    'Heritage Site.</p>'+
    '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
    'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
    '(last visited June 22, 2009).</p>'+
    '</div>'+
    '</div>';

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var mapOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


}

function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });

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

      var marker = new google.maps.Marker({
          position: marker.position,
          map: map,
          title: 'Uluru (Ayers Rock)'
      });
      google.maps.event.addListener(marker, 'click', function() {
        $.ajax({
          url: url+marker.position.ob+","+marker.position.pb+"",
          dataType: "jsonp",
          success: function (data) {
            console.log(data);
            infowindow.open(map,marker);
          }
        });
      });
    } 
    else {
      alert('Geocode was not successful for the following reason: ' + status);
    }

  });
}

// On page-ready
$(document).ready(function(){

  initialize();
  button.click(function(){
    codeAddress();
  });

});

预测 API 返回许多我想使用 CSS3 显示的详细信息。但是，我需要确保在叠加层出现后需要显示与每个城市相关的数据。目前它只是静态文本。

Answer 1

为什么title在添加职位本身时不添加？：

  map.setCenter(results[0].geometry.location);
  var marker = new google.maps.Marker({
      map: map,
      position: results[0].geometry.location,
      title: results[0].formatted_address// or anything you want here 
  });

我考虑到，谷歌地图 api 结果是这样的：

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "695564",
               "short_name" : "695564",
               "types" : [ "postal_code" ]
            },
            {
               "long_name" : "Thiruvananthapuram",
               "short_name" : "TVM",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "Kerala",
               "short_name" : "KL",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "India",
               "short_name" : "IN",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "Kerala 695564, India",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : 8.5894172,
                  "lng" : 77.0210912
               },
               "southwest" : {
                  "lat" : 8.5616185,
                  "lng" : 76.96664299999999
               }
            },
            "location" : {
               "lat" : 8.5753702,
               "lng" : 76.99310740000001
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : 8.5894172,
                  "lng" : 77.0210912
               },
               "southwest" : {
                  "lat" : 8.5616185,
                  "lng" : 76.96664299999999
               }
            }
         },
         "types" : [ "postal_code" ]
      }
   ],
   "status" : "OK"
}