master

分支 (1)

管理

管理

master

map
/
amap-tour.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>aimamiumiu大连旅游</title>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/layui/layui.js"></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.8&key=715df321d5c3705775b73405aff8afcb&plugin=AMap.PolyEditor,AMap.CircleEditor"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style type="text/css">
        .info {
            position: absolute;
            top: 15px;
            /* left: 80px; */
            right: 0px;
        }

        .lay_check_b {
            margin-bottom: 10px;
        }

        .amap-marker-label {
            position: absolute;
            z-index: 2;
            background-color: #458B00;
            border: solid 1px #458B00;
            padding: 5px 10px;
            color: #fff;
            white-space: nowrap;
            cursor: default;
            font-size: 12px;
            line-height: 14px;
        }

        .amap-marker-label-h {
            position: absolute;
            z-index: 2;
            background-color: #d57e13;
            border: solid 1px #d57e13;
            padding: 5px 10px;
            color: #fff;
            white-space: nowrap;
            cursor: default;
            font-size: 12px;
            line-height: 14px;
        }

        .amap-marker-label-t {
            position: absolute;
            z-index: 2;
            background-color: #4d97dc;
            border: solid 1px #4d97dc;
            padding: 5px 10px;
            color: #fff;
            white-space: nowrap;
            cursor: default;
            font-size: 12px;
            line-height: 14px;
        }
    </style>

    <body>
        <div style="position:absolute;height:100%;width:100%;">
            <div id='container'></div>
            <div id="tip" style="margin-top:30px;"></div>
        </div>
        <div class="info">
            <form class="layui-form" action="">
                <input type="checkbox" name="" checked="" title="大连市">
            </form>
        </div>
        <script type="text/javascript">
            layui.use('form', function() {
                var form = layui.form;
                $('.layui-form div').addClass("lay_check_b");
                //监听提交
                form.on('checkbox', function(data) {
                    var a = data.elem,
                        name = a.title,
                        checked = a.checked;
                    for (var i = 0; i < districtarr.length; i++) {
                        var b = districtarr[i];
                        b.name === name ? (checked ? b.obj.setMap(map) : map.remove(b.obj)) : null;
                    }
                    if (!circleShow) {
                        circleShow = true;
                        // drawCircle();
                    }
                    return false;
                });
            });

            /*由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。*/
            var map, geolocation, district, districtarr = [],
                circleShow = false;
            //加载地图，调用浏览器定位服务
            map = new AMap.Map('container', {
                resizeEnable: true,
                mapStyle: "amap://styles/grey"
            });
            map.plugin('AMap.Geolocation', function() {
                geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true, //是否使用高精度定位，默认:true
                    timeout: 10000, //超过10秒后停止定位，默认：无穷大
                    buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                    zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    buttonPosition: 'RB'
                });
                map.addControl(geolocation);
                geolocation.getCurrentPosition();
                AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
                AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
            });
            AMap.event.addListener(map, 'zoomend', function() {
                var zoom = map.getZoom();
            });
            AMap.event.addListener(map, 'dragend', function() {
                var point = map.getCenter();
            });
            //解析定位结果
            function onComplete(data) {
                var str = ['定位成功'];
                // str.push('经度：' + data.position.getLng());
                // str.push('纬度：' + data.position.getLat());
                if (data.accuracy) {
                    str.push('精度：' + data.accuracy + ' 米');
                } //如为IP精确定位结果则没有精度信息
                // str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
                document.getElementById('tip').innerHTML = str.join('<br>');
                getData();
            }
            //解析定位错误信息
            function onError(data) {
                document.getElementById('tip').innerHTML = '定位失败';
            }

            function getData() {
                //加载行政区划插件
                AMap.service('AMap.DistrictSearch', function() {
                    var opts = {
                        subdistrict: 1, //返回下一级行政区
                        extensions: 'all', //返回行政区边界坐标组等具体信息
                        level: 'city' //查询行政级别为 市
                    };
                    //实例化DistrictSearch
                    district = new AMap.DistrictSearch(opts);
                    district.setLevel('district');
                    //行政区查询
                    district.search('大连市', function(status, result) {
                        var bounds = result.districtList[0].boundaries;
                        var polygons = [];
                        if (bounds) {
                            for (var i = 0, l = bounds.length; i < l; i++) {
                                //生成行政区划polygon
                                var polygon = new AMap.Polygon({
                                    map: map,
                                    path: bounds[i],
                                    strokeColor: "#0064fc",
                                    fillColor: "#0064fc",
                                    strokeWeight: 2,
                                    fillOpacity: 0.2,
                                    strokeOpacity: 0.7,
                                    strokeStyle: 'solid'
                                });
                                polygons.push(polygon);
                                districtarr.push({
                                    name: "大连市",
                                    obj: polygon
                                });
                            }

                            map.setFitView(); //地图自适应
                        }
                    });
                });
            }

            function drawPolygon(arr, name) {
                var polygonArr = arr;
                var polygon = new AMap.Polygon({
                    path: polygonArr,
                    strokeColor: "#0064fc",
                    fillColor: "#0064fc",
                    strokeWeight: 2,
                    fillOpacity: 0.2,
                    strokeOpacity: 0.7,
                    strokeStyle: 'solid'
                }); //创建多边形
                districtarr.push({
                    name: name,
                    obj: polygon
                });
                // polygon.setMap(map); //增加多边形
            };
            getData();

            function drawCircle() {
                var pointStr = "116.397477,39.908692";
                var circle = new AMap.Circle({
                    center: [116.397477, 39.908692], // 圆心位置
                    radius: 10000, //半径
                    strokeColor: "#F33", //线颜色
                    strokeOpacity: 1, //线透明度
                    strokeWeight: 3, //线粗细度
                    fillColor: "#ee2200", //填充颜色
                    fillOpacity: 0.35 //填充透明度
                });
                circle.setMap(map);
                var _circleEditor = new AMap.CircleEditor(map, circle);
                _circleEditor.open();
            };
            var tourponitArr = [{
                "name": "大连周水子国际机场",
                "point": [121.543699, 38.964114],
                "icon": "t"
            }, {
                "name": "星海广场",
                "point": [121.587956, 38.881979]
            }, {
                "name": "俄罗斯风情街",
                "point": [121.636414, 38.927567]
            }, {
                "name": "滨海路",
                "point": [121.718461, 39.121601]
            }, {
                "name": "大连现代博物馆",
                "point": [121.586115, 38.888483]
            }, {
                "name": "中山广场",
                "point": [121.643832, 38.921526],
                "icon": "b"
            }, {
                "name": "棒棰岛",
                "point": [121.719323, 38.885039]
            }, {
                "name": "海之韵",
                "point": [121.700026, 38.899287]
            }, {
                "name": "威尼斯水城",
                "point": [121.691619, 38.924568]
            }, {
                "name": "大连圣亚海洋世界",
                "point": [121.57067, 38.878168],
                "icon": "b"
            }, {
                "name": "大连老虎滩海洋公园",
                "point": [121.6754, 38.871662]
            }, {
                "name": "金石滩国家旅游度假区",
                "point": [121.995333, 39.096074]
            }, {
                "name": "大连北站",
                "point": [121.607318, 39.016593],
                "icon": "t"
            }, {
                "name": "大连海之恋酒店",
                "point": [121.583537, 38.883596],
                "icon": "h"
            }];

            function addText() {

                for (var i = 0; i < tourponitArr.length; i++) {
                    var a = tourponitArr[i];
                    var text = new AMap.Text({
                        text: a.name,
                        textAlign: 'center', // 'left' 'right', 'center',
                        verticalAlign: 'middle', //middle 、bottom
                        draggable: false,
                        cursor: 'pointer',
                        angle: 0,
                        style: {
                            // 'background-color': 'yellow',
                            // 'border': 'solid 1px #0088ff',
                            // 'padding': '5px 10px'
                            'background-color': '#458B00',
                            'border': 'solid 1px #458B00',
                            'padding': '5px 10px',
                            'color': '#fff'
                        },
                        position: a.point
                    });
                    text.setMap(map);
                }
            };

            function addMarkerA() {

                for (var i = 0; i < tourponitArr.length; i++) {
                    var a = tourponitArr[i];
                    var marker = new AMap.Marker({ //添加自定义点标记
                        map: map,
                        position: a.point, //基点位置
                        offset: new AMap.Pixel(-17, -42), //相对于基点的偏移位置
                        draggable: false, //是否可拖动
                        content: '<div style="background-color: #458B00;border: solid 1px #458B00;padding: 5px 10px;color: #fff;">' + a.name + '</div>' //自定义点标记覆盖物内容
                    });
                }
            };

            function addMarker() {

                for (var i = 0; i < tourponitArr.length; i++) {
                    var a = tourponitArr[i],
                        icon, off, loff;
                    if (a.icon) {
                        if (a.icon == "b") {
                            icon = "img/marker-" + a.icon + ".png";
                            off = new AMap.Pixel(-3, -3);
                            loff = new AMap.Pixel(32, 18);
                        } else if (a.icon == "t") {
                            icon = "img/marker-" + a.icon + ".png";
                            off = new AMap.Pixel(-3, -29);
                            loff = new AMap.Pixel(32, -13);
                        } else {
                            icon = "img/marker-" + a.icon + ".png";
                            off = new AMap.Pixel(-33, -29);
                            loff = new AMap.Pixel(-105, -13);
                        }
                    } else {
                        icon = "img/marker-u.png";
                        off = new AMap.Pixel(-3, -29);
                        loff = new AMap.Pixel(32, -13);
                    }
                    var marker = new AMap.Marker({
                        icon: icon,
                        offset: off,
                        position: a.point
                    });
                    marker.setMap(map);
                    // 设置label标签
                    marker.setLabel({ //label默认蓝框白底左上角显示，样式className为：amap-marker-label
                        offset: loff, //修改label相对于maker的位置
                        content: a.name
                    });
                }
                changeStyle();
            };
            addMarker();

            function changeStyle() {
                var inter = setInterval(function() {
                    var a = $(".amap-marker-label");
                    if (a.length != 0) {
                        clearInterval(inter);
                        for (var i = 0; i < a.length; i++) {
                            var b = a[i];
                            if (b.textContent == "大连海之恋酒店") {
                                $(b).addClass("amap-marker-label-h");
                            } else if (b.textContent == "大连周水子国际机场" || b.textContent == "大连北站") {
                                $(b).addClass("amap-marker-label-t");
                            }
                        }
                    }
                }, 200);

            };
        </script>
    </body>

</html>