将latlngs的对象转换为google.map.LatLng对象以进行多边形构建

时间:2012-07-25 10:44:22

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

我有一个如下定义的latlng值的javascript对象,它被推送到谷歌地图创建脚本

var lat1 = '51.0001';
        var lng1 = '52.0001';
        var lat2 = '61.0001';
        var lng2 = '62.0001';
        google_map_item.coordinates = [
            new polygonLatLng(lat1,lng1),
            new polygonLatLng(lat2,lng2)
        ];

    google_map_items.push(google_map_item);

    function polygonLatLng(lat,lng){
        this.lat = lat;
        this.lng = lng;
    }

正如您所看到的,google_map_item.coordinates对象基本上只是几个点,我知道这不是完整的多边形,但我已经硬编码了一些简单的值,只是尝试让脚本在使用动态之前工作的。

对象google_map_items会被推送到地图创建脚本,如下所示:

 jQuery(document).ready(function($) {       

        var longitude = google_map_items[0].lat;
        var latitude = google_map_items[0].lon;
        var center = new google.maps.LatLng(longitude, latitude);

        var zoomlevel = parseInt(google_map_items[0].zoomlevel);

        var myOptions = {
          zoom: zoomlevel, 
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var bounds = new google.maps.LatLngBounds();
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        for(i = 0; i < google_map_items.length; i++) {
          var latlng = new google.maps.LatLng(google_map_items[i].lat, google_map_items[i].lon);
          bounds.extend(latlng);

          var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=" + (i + 1) + "|FF8888|000000",
            zIndex: Math.round(latlng.lat()*-100000)<<5
          });

          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              $(".surgery").removeClass("highlighted");
              $("#surgery-" + (i + 1)).addClass("highlighted");
            }
          })(marker, i));

        }

        if (google_map_items.length >1 ) { map.fitBounds(bounds); }

                //check if area to add to map
                //if(google_map_items.coordinates){
                var surgeryArea;

                var areaCoords = [

                ];

                    surgeryArea = new google.maps.Polygon({
                        paths: google_map_item.coordinates,
                        strokeColor: "#FF0000",
                        strokeOpacity: 0.4,
                        strokeWeight: 2,
                        fillColor: "#FF0000",
                        fillOpacity: 0.35,
                        clickable: true
                    });

                    // add an event listener
                    google.maps.event.addListener(surgeryArea, 'click', function() {
                        this.setMap(null);
                    });

                    surgeryArea.setMap(map);

                //}

      });

对于areaCoords,需要使用google_map_item.coordinates对象中每个点的新google.maps.LatLng构造函数构建一个空的obecjt。我对javascript对象和数组操作的了解不够先进,无法通过语法来传递这一点,因此非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

更改坐标值:

    google_map_item.coordinates = [
        new google.maps.LatLng(lat1, lat1),
        new google.maps.LatLng(lat2, lat2)
    ];