javascript - 如何使用javascript调用google map具体位置

Question

假设我有一个包含 2 <div> 的 html ，一个是谷歌地图，一个是列表
当然， map <div>正在显示 map
名单<div>是 th2 位置列表(例如纽约、伦敦等)
我有一个问题，如何点击列表中的一个位置，然后 map 就会转到特定位置？
当 onClick 列表项时，它是使用 javascript 调用还是如何使用 Javascript 执行此功能？

Answer 1

我正在使用一些 jquery 来选择元素，调用点击函数，并从 title 属性中获取地址。

查看此 jsfiddle 以供引用:

http://jsfiddle.net/X5r8r/263/

<a class="location" title="New York, NY">New York</a>
<a class="location" title="Los Angeles, CA">Los Angeles</a>
<a class="location" title="Washington District of Columbia">Washington</a>

<div id="map-canvas" title="1600 Washington"></div>

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>

var geocoder;
var map;
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(0,0);
    var myOptions = {
         zoom: 17,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
}

function codeAddress(element) {
    var address = element.attr('title');
    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
            });
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

$(document).ready(function(){
    $map = $('#map-canvas');

    initialize();
    codeAddress($map);

    $('.location').click(function(){
        $me = $(this);
        codeAddress($me);
    });
});