• 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!');
    }
    })
  • 相关阅读:
    Python 练习册,每天一个小程序----第0000题
    CMDB系统原创开发
    203.pycharm连接远程终端
    202. 菜鸟学习k8s安装1
    (高并发)防止重复点击,屏蔽多次无效请求的解决方案(优惠劵被重复领取,恶意撸羊毛)
    SSM批量插入和修改实现实例
    java服务器访问其他服务器工具类编写
    递归实例,欢迎大家修改优化
    SpringJDBC
    Spring入门
  • 原文地址:https://www.cnblogs.com/qyhol/p/5541689.html
Copyright © 2020-2023  润新知