谷歌地图处理:标注marker,鼠标选择区域,编辑选中区域内的数据,根据国家筛选数据等

项目简述:做一个操作基于谷歌地图等操作工具,用了一天半等时间,功能包括:1,查询数据库潜店列表,根据不同国家把国家中的marker标注出来。2,鼠标选择地图中一部分区域,通过计算坐标, 将区域中包含的坐标选出来进行统一编辑。3,切换不同国家。4,潜店搜索。

变量定义

这里要把map定义出来,记录点击次数count,保存原始列表markersListOrigin,当前

var map,
    count=0,    // 第一次点击
    markersListOrigin,  // 初始化的marker
    markersListActive = [],  // 激活状态下的列表
    bermudaTriangle,  // 选中的区域点对象
    markersArea,    // 选中的区域
    markerFirst,  // 点击的第一个坐标
    markerSecond,  // 点击的第二个坐标
    selectedArr = [],  // 选中列表
    raCountry = '',
    raProv = '',
    raCity = '',
    myLatLngRoot={},
    nowCountry = '菲律宾', // 当前国家
    rootUrl = '111.111.1.11'

初始化数据

初始化部分分为三块:初始化获取数据;初始化地图,并为地图绑定事件;初始化marker。

function init(hasLat) {
    $.ajax({
        url:'http://'+rootUrl+'/ditu/index/getMapList',
        type: 'POST',
        data:{nowCountry:nowCountry},
        success: function (res) {
            res.map(item => {
                item.latLng = {
                    lat:Number(item.latitude),
                    lng: Number(item.longitude)
                }
                console.log(item)
                return item
            })
            markersListOrigin =copyDeep(res)
            initMap(hasLat)
            initMarker(markersListOrigin)
        }
    })
}
function initMap(hasLat) {
    var myLatLng = markersListOrigin[0].latLng;
    var zoom = 6
    if (hasLat){
        myLatLng = myLatLngRoot
        zoom = 16
    }
    map = new google.maps.Map(document.getElementById('map'), {
        center: myLatLng,
        zoom: zoom
    });
    google.maps.event.addListener(this.map,'click', (e) => {
        count++
        switch (count) {
            case 1:
            addMarker({
                latLng:{lat: e.latLng.lat(), lng: e.latLng.lng()},
                NAME: '第一个点'
            })
            break;
            case 2:
                addArea({
                    latLng:{lat: e.latLng.lat(), lng: e.latLng.lng()},
                    NAME: '第二个点'
                })
                break;
            case 3:
                resetSelect()
                break;
        }
        return false
    });
}
/**************
 *  初始化重置marker
 */
function initMarker(positionArr) {
    var _this = this
    positionArr.forEach(item => {
        console.log(item.ra_edit_count)
        var icon = item.ra_edit_count ? '__PUBLIC__/img/beforeIcon.png' : ''
        if (item.icon) {
            icon = item.icon
        }
        var marker = new google.maps.Marker({
            position: item.latLng,
            map: map,
            title: item.NAME,
            icon:icon
        });
        /*
        marker.addListener('click', (e) => {
            _this.map.setZoom(14);
            _this.map.setCenter(marker.getPosition());
        });
        */
        markersListActive.push(marker)
    })
}

通过对地图对点击,增加marker标注,并画出选中区域

第一次点击时,增加一个标注点。第二次点击时,通过两个标注点得出矩形区域,通过bermudaTriangle标注矩形区域

/**************
 *  增加一个marker,第一次点击
 */
function addMarker(positionObj) {
    var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
    var marker = new google.maps.Marker({
        position: positionObj.latLng,
        map: map,
        title: positionObj.NAME,
        icon: image
    });
    markerFirst = {
        latLng: positionObj.latLng,
        name: positionObj.name
    }
    markersListActive.push(marker)
}

/**************
 *  添加区域,第二次点击
 */
function addArea(positionObj) {
    var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
    var marker = new google.maps.Marker({
        position: positionObj.latLng,
        map: map,
        title: positionObj.NAME,
        icon: image
    });
    markerSecond = {
        latLng: positionObj.latLng,
        name: positionObj.name
    }
    markersListActive.push(marker)

    var triangleCoords = getAreaPosition()

    // Construct the polygon.
    bermudaTriangle = new google.maps.Polygon({
        paths: triangleCoords,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    });
    bermudaTriangle.setMap(map);


    computeSelectedIcons()
}

对选中区域内的数据进行提取

根据选中的坐标点,对当前坐标列表进行筛选,做碰撞检测。

function getAreaPosition() {
    var arr  = [
        {
            lat: markerFirst.latLng.lat,
            lng: markerFirst.latLng.lng,
        },
        {
            lat: markerFirst.latLng.lat,
            lng: markerSecond.latLng.lng,
        },
        {
            lat: markerSecond.latLng.lat,
            lng: markerSecond.latLng.lng,
        },
        {
            lat: markerSecond.latLng.lat,
            lng: markerFirst.latLng.lng,
        },
    ]
    markersArea = arr
    return arr
}
/**********
 * 计算选中区域内
 */
function computeSelectedIcons() {
    cleanMarkers()
    var active = []
    selectedArr = []
    markersListOrigin.forEach(item => {
        var activeItem = copyDeep(item)
        if (
            (item.latLng.lat <= markersArea[0].lat ) && (item.latLng.lat >=  markersArea[3].lat ) &&
            (item.latLng.lng >=  markersArea[0].lng ) &&
            (item.latLng.lng <= markersArea[2].lng ) ) { activeItem.icon = '__PUBLIC__/img/selectedIcon.png' selectedArr.push(activeItem) } active.push(activeItem) }) initMarker(active) function removeLines() { if (points) { points.length = 0; } points = []; } openLayer() } 

用到对一些其他部分方法

function resetSelect() {
    count = 0;
    cleanMarkers()
    selectedArr = []
    if (bermudaTriangle && bermudaTriangle.hasOwnProperty('gm_accessors_')) {
        bermudaTriangle.setMap(null);
    }
    initMarker(markersListOrigin)
}
/**********
 *  清空marker
 */
function cleanMarkers() {
    for (var i = 0; i < markersListActive.length; i++) { markersListActive[i].setMap(null); } } /******************* * 多层深拷贝 */ function copyDeep (origin) { if (origin instanceof Object) { if (isArray(origin)) { var targetArr = [] for (var i = 0; i < origin.length; i++) { targetArr.push(copyDeep(origin[i])) } return targetArr } else { var targetObj = {} for (var item in origin) { targetObj[item] = copyDeep(origin[item]) } return targetObj } } else { return origin } function isArray(value) { return !!value && value instanceof Array } } 

随机浏览