googlemap中标记值的地理围栏

时间:2017-09-13 08:43:24

标签: javascript angularjs google-maps

HTML:

<ui-gmap-google-map center='map.center' zoom='map.zoom' control="map.control">
    <ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
        <ui-gmap-window show="true">
            <div class="popup">
                {{marker.content}}
            </div>
        </ui-gmap-window>
    </ui-gmap-marker>
</ui-gmap-google-map>

JS:

控制器部分:

// Google地图

$scope.map = {
    center: {
        latitude: 0,
        longitude: 0
    },
    zoom: 1,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    control: {}
};

// place a marker
$scope.markers = [];

function setMarker(lat, long, title, content) {
    var marker = {
        id: $scope.markers.length+1,
        coords: {
            latitude: lat,
            longitude: long
        },
        content: content,
        options: {
            title: title,
            icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
        }
    };
    $scope.markers.push(marker);
};

$scope.DrawMap = function(response) {
    console.log("DrawMap");
    $scope.markers = [];
    var data = response.json.response.data[0].data[1];
    var markerLatLng = [];
    var map = $scope.map.control.getGMap();
    var bounds  = new google.maps.LatLngBounds();


    // set zoom level based on xlabel
    var level = response.json.response.data[0].xlabel;
    if (level === 'country') {
        $scope.map.zoom = 4;
    } else if (level === 'state') {
        $scope.map.zoom = 4;
    } else if (level === 'city') {
        $scope.map.zoom = 6;
    } else if (level === 'All Centres') {
        $scope.map.zoom = 8;
    }else if (level ==='divisons'){
        $scope.map.zoom =10;
    } else {
        $scope.map.zoom = 4;  //default to zoom 10
    };


    //set markers for each data
    $.each(data, function(key, entry) {

       setMarker(entry.lat, entry.long,
                 entry.x,
                 /*response.json.response.data[0].data[0] +*/  
                response.json.response.data[0].s1 + ": " + entry.s1 + " "+" "+
            response.json.response.data[0].s2 + ": " + entry.s2);
       var point = new google.maps.LatLng(entry.lat, entry.long);

       markerLatLng.push(point);
       var loc = new google.maps.LatLng(entry.lat, entry.long);
       bounds.extend(loc);
    });

    map.fitBounds(bounds);  
}

我的地图显示有标记。我想为该标记位置实现地理围栏。所以在drawmap();内使用了以下代码,但地理围栏无效。

for (var marker in markers) {
          // Add the circle for this city to the map.
          var Circle = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map,
            center: markers[marker].center,
            radius: 100
          });
        }

我在这里使用了类似的代码, https://developers.google.com/maps/documentation/javascript/examples/circle-simple

0 个答案:

没有答案