• angularjs google map markers+ ui-gmap-windows --->增加click 事件


    jsp:

    <div class="modal-body viewOnMap">
    <div class="cboxClose" ng-click="fn.close()">close</div>
    <div class="mgt-20">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds" >
    <ui-gmap-markers models="randomMarkers" coords="'self'" icon="'icon'" click="'onClicked'" >
    <ui-gmap-windows show="showWindow">
    <div ng-controller="infoWindowCtrl">
    <a ng-click="showInfo()">Contact Info</a><hr class="mgt-5 mgb-5" ng-non-bindable/>
    <a ng-click="showInfo()">Contact Address</a><hr class="mgt-0 mgb-5" ng-non-bindable/>
    <a ng-click="showInfo()">Other</a>
    <!--<span ng-click="showInfo()">Contact Info</span><hr class="mgt-0 mgb-0" ng-non-bindable/>
    <span ng-click="showInfo()">Contact Address</span><hr class="mgt-0 mgb-0" ng-non-bindable/>
    <span ng-click="showInfo()">Other</span>-->
    </div>
    </ui-gmap-windows>
    </ui-gmap-markers>
    </ui-gmap-google-map>
    </div>
    </div>

    js:
    .controller('viewOnMapInfoCtrl',['$scope','$rootScope','NiHttp','NiDialog','$timeout','order','latlng','uiGmapIsReady',function($scope,$rootScope,NiHttp,NiDialog,$timeout,order,latlng,uiGmapIsReady){
    var vm = $scope.vm = {};
    var fn = $scope.fn = {};

    fn.close=function(){
    NiDialog.close();
    }
    if(order!=null && latlng==null){
    var srcOpt = {
    url: '/orderHistory/findLeadsByOrderCode',
    data: {orderCode:order.orderCode}
    };
    NiHttp.postForm(srcOpt)
    .success(function(data){
    console.log(_.uniq(_.pluck(data.result,'coordinate')));
    vm.coordinate=_.uniq(_.pluck(data.result,'coordinate'));
    })
    }
    if(order==null && latlng!=null){
    vm.coordinate=latlng;
    }
    $timeout(function () {
    $scope.map = {
    center: {
    latitude: latlng[0].split(',')[0],
    longitude: latlng[0].split(',')[1]
    },
    zoom: 13,
    bounds: {}
    };
    $scope.options = {
    scrollwheel: true
    };
    var createRandomMarker = function(i, bounds,latitude,longitude,idKey) {

    if (idKey == null) {
    idKey = "id";
    }

    var ret = {
    latitude: latitude,
    longitude: longitude,
    title: 'm' + i,
    showWindow: false,
    coords: {
    latitude: latitude,
    longitude: longitude
    },
    };
    ret[idKey] = i;
    return ret;
    };
    $scope.randomMarkers = [];
    // Get the bounds from the map once it's loaded
    $scope.$watch(function() {
    return $scope.map.bounds;
    }, function(nv, ov) {
    // Only need to regenerate once
    if (!ov.southwest && nv.southwest) {
    var markers = [];
    _.forEach(vm.coordinate,function(item,key){
    var latlng=item.split(',');
    console.log(latlng);
    markers.push(createRandomMarker(key, $scope.map.bounds,latlng[0],latlng[1]));
    })
    $scope.randomMarkers = markers;
    }
    }, true);
    _.each($scope.randomMarkers, function (marker) {
    marker.closeClick = function () {
    marker.showWindow = false;
    $scope.$apply();
    };
    marker.onClicked = function () {
    $scope.onMarkerClicked(marker);
    };
    });
    }, 0);

    var markerToClose = null;
    $scope.onMarkerClicked = function (marker) {
    markerToClose = marker; // for next go around
    marker.showWindow = true;
    $scope.$apply();
    };

    }])
    .controller('infoWindowCtrl', function($scope) {
    $scope.showInfo = function() {
    console.log('Button clicked!');
    }
    })
  • 相关阅读:
    html input type=file 选择图片,图片预览 纯html js实现图片预览
    asp.net mvc Controller控制器返回类型
    webrequest HttpWebRequest webclient/HttpClient
    js中__proto__和prototype constructor 的区别和关系
    JQuery的ajaxFileUpload的使用
    cuda中当数组数大于线程数的处理方法
    cuda中threadIdx、blockIdx、blockDim和gridDim的使用
    cuda和gcc版本不兼容
    【转】CentOS 6.6 升级GCC G++ (当前最新版本为v6.1.0) (完整)
    matlab练习程序(地图上画经纬度)
  • 原文地址:https://www.cnblogs.com/qyhol/p/5541689.html
Copyright © 2020-2023  润新知