Google地图:设置中心,设置中心点和设置更多积分

时间:2011-04-01 14:10:29

标签: javascript google-maps google-maps-api-3

我正在使用Google Maps V3,我想:

  1. 将地图的中心设置为特定的latlng。我正在使用:

    map.setCenter(new google.maps.LatLng(mylat,mylong));
    
  2. 在该中心位置设置一个点。我目前正在使用:

    var point = new google.maps.LatLng(mylat,mylong);
    
    marker = map_create_marker(point,"My Popup",map_icon_red);
    

    使用此功能:

    function map_create_marker(point,html,icon) {
        var marker =    new google.maps.Marker({
            position: point,
            map: map,
            icon: icon,
            shadow: map_icon_shadow
        });
    
        if(html!="") {
            var infowindow = new google.maps.InfoWindow({
                    content: html
            });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });
        }
        return marker;
    }
    
  3. 使用上述相同方法放置更多标记

  4. 问题在于,当我像上面那样设置中心时,它只会显示第一个标记。但如果我没有设置中心,它会显示所有标记。我怎样才能让他们同时工作?

    以下是完整的JavaScript代码:

    <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" language="JavaScript">
        var map;
    
        var map_icon_green = new google.maps.MarkerImage(
            "http://mysite.com/green_pointer.png",
            new google.maps.Size(12,20),
            new google.maps.Point(0,0));
    
        var map_icon_blue = new google.maps.MarkerImage(
            "http://mysite.com/blue_pointer.png",
            new google.maps.Size(12,20),
            new google.maps.Point(0,0));
    
        var map_icon_yellow = new google.maps.MarkerImage(
            "http://mysite.com/yellow_pointer.png",
            new google.maps.Size(12,20),
            new google.maps.Point(0,0));
    
        var map_icon_red = new google.maps.MarkerImage(
            "http://mysite.com/red_pointer.png",
            new google.maps.Size(12,20),
            new google.maps.Point(0,0));
    
        var map_icon_shadow = new google.maps.MarkerImage(
            "http://mysite.com/shadow.png",
            new google.maps.Size(28,20),
            new google.maps.Point(-6,0));
    
        var map_crosshair = new google.maps.MarkerImage(
            "http://mysite.com/cross-hair.gif",
            new google.maps.Size(17,17),
            new google.maps.Point(0,0));
    
    
        function map_loader() {
            var myOptions = {
                zoom: 5,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel:false
            }
    
            map = new google.maps.Map(
                    document.getElementById('map_container'), myOptions);
    
            map.setCenter(new google.maps.LatLng(53.0,-1.0));
    
            // <![CDATA[
            var point = new google.maps.LatLng(53.0,-4.0755);
            marker = map_create_marker(point,"some html which is OK",map_icon_red);
            // ]]>
    
            // <![CDATA[
            var point = new google.maps.LatLng(-24.0,25.0);
            marker = map_create_marker(point,"some html which is OK",map_icon_red);
            // ]]>
    
            // <![CDATA[
            var point = new google.maps.LatLng(54.0,-2.0);
            marker = map_create_marker(point,"some html which is OK",map_icon_red);
            // ]]>
    
            map.disableDoubleClickZoom = false;
        }
    
    
        function map_create_marker(point,html,icon) {
            var marker =    new google.maps.Marker({
                position: point,
                map: map,
                icon: icon,
                shadow: map_icon_shadow
            });
    
            if(html!="") {
                var infowindow = new google.maps.InfoWindow({
                        content: html
                });
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
                });
            }
            return marker;
        }
        var map_set_center = 0;
        function map_load_resize() {
            if(map_set_center==0) {
                 map.setCenter(new google.maps.LatLng(53.0,-1.0));
            }
            map_set_center = 1;
        }
    
        </script>   
    

2 个答案:

答案 0 :(得分:72)

尝试将此代码用于v3:

gMap = new google.maps.Map(document.getElementById('map')); 
gMap.setZoom(13);      // This will trigger a zoom_changed on the map
gMap.setCenter(new google.maps.LatLng(37.4419, -122.1419));
gMap.setMapTypeId(google.maps.MapTypeId.ROADMAP);

答案 1 :(得分:1)

不再需要使用 google.maps.LatLng。下面的代码应该可以工作,

map.setCenter({ lat: 41.878, lng: -87.629 });