master

分支 (1)

管理

管理

master

rencheng
/
zhongdianxiangmu.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>任城统计大数据平台</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1460471_28h1ax8hlh.css">
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!--引入echarts-->
    <script src='js/echarts.min.js'></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=CcOD8WlrqFY16GxAuioSw7U88NjIpCDD">
    </script>
</head>

<body>
    <div id="canvas">
        <div class="work-header over">
            <a href="./index.html" class="work-header__logo flf" style="display: block;">
                <img src="./img/logo.png" style="display:block;height: 100%;" alt="">
            </a>
            <div class="work-header__position">
            </div>
            <div class="work-header__user flr">
                <div class="work-header__message over">
                    <i class="flf iconfont icon-xiaoxi1"></i>
                    <p class="flf work-header__message__button">消息</p>
                </div>
                <div class="work-header__my">
                    <el-dropdown>
                        <img src="./img/head.jpg" alt="">
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>用户信息</el-dropdown-item>
                            <el-dropdown-item>用户信息</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="work-header__logout">
                    <i class=" iconfont icon-tuichu1"></i>
                </div>
            </div>
        </div>
        <div class="work-content">
            <el-row :gutter="20">
                <el-col :span="4" class="work-content__menu">
                    <el-card class="box-card">
                        <h4><b>系统管理</b><span>&nbsp;&nbsp;(任城平台)</span></h4>
                        <a :href="info.href" style="display: block;overflow: hidden;text-decoration: none;"
                            :class="['work-content__menu__list',info.icon == 'icon-fanghu' ? 'work-content--active' : '']"
                            v-for="info in menus" :key="info.icon">
                            <!-- <a :href="info.href" style="display: block;overflow: hidden;text-decoration: none;"> -->
                            <i :class="['iconfont', info.icon]"></i>
                            <p class="work-content__article">{{info.name}}</p>
                            <i class="work-content__details iconfont icon-ic_arrow_r"></i>
                            <!-- </a> -->
                        </a>
                    </el-card>
                </el-col>
                <el-col :span="20" class="work-content__body">
                    <div class="work-content__nav">
                        <a style="text-decoration: none;"><i
                                class="iconfont icon-fanhui work-content__nav__back"></i></a>
                        <a style="text-decoration: none;">
                            <p class="work-content__nav__menu work-content__nav__menu--active">重点项目</p>
                        </a>
                    </div>
                    <el-scrollbar style="height: calc(100% - 65px);overflow:hidden;">
                        <div class='industrial'>
                            <div class='technology economic'>
                                <!--新一代产业标题顶部-->
                                <div class='technologyTitle economic economic12'>
                                    <p>重点项目数据</p>
                                    <i></i>
                                </div>
                                <div class='industrialeconomic'>
                                    <div class='economics' id="growth0"></div>
                                </div>
                            </div>
                            <div class='technology economic economic12'>
                                <!--新一代产业标题顶部-->
                                <div class='technologyTitle economic'>
                                    <p>项目地图</p>
                                    <i></i>
                                </div>
                                <div class=''>
                                    <div id="allmap"></div>
                                </div>
                            </div>
                        </div>
                        <div class='industrial'>
                            <div class='technology yuanqu'>
                                <div class='technologyTitle'>
                                    <p>园区经济</p>
                                    <i></i>
                                </div>
                                <div class='xiangmuyuanqu'>
                                    <div>
                                        <label>项目名称:</label>
                                        <input placeholder="请输入">
                                    </div>
                                    <div>
                                        <label>项目金额:</label>
                                        <input placeholder="请输入">
                                    </div>
                                    <div>
                                        <label>所在地区:</label>
                                        <input placeholder="请输入">
                                    </div>
                                    <button>
                                        <img src='img/chaxunimg.jpg'>
                                        查询
                                    </button>
                                </div>
                                <el-table
                                    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                                    stripe style="width: 100%">
                                    <el-table-column label="项目名称指标" prop="date" align='center'>
                                    </el-table-column>
                                    <el-table-column label="项目建设单位" prop="name" align='center'>
                                    </el-table-column>
                                    <el-table-column label="项目开工时间" prop="time" align='center'>
                                    </el-table-column>
                                    <el-table-column label="计划投资金额" prop="jine" align='center'>
                                    </el-table-column>
                                    <el-table-column label="累计完成投资额" prop="zouzi" align='center'>
                                    </el-table-column>
                                    <el-table-column align="center" label="操作" prop="caozuo">
                                        <template slot-scope="scope">
                                            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                                                style='background:#30ccbf;border:none;border-radius:6px;color:#fff;'>查看
                                            </el-button>
                                            <el-button size="mini" type="danger"
                                                @click="handleDelete(scope.$index, scope.row)"
                                                style="background: #fab84a;border:none;border-radius:6px;color:#fff;">编辑
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </el-scrollbar>
                </el-col>
            </el-row>
        </div>
    </div>
</body>
<style>
    /* base */
    * {
        margin: 0px;
        padding: 0px;
        font-style: normal;
    }

    .over {
        overflow: hidden;
    }

    .flf {
        float: left;
    }

    .flr {
        float: right;
    }


    body {
        background: #e9ecf3;
        font-size: 18px;
    }

    .work-header {
        height: 70px;
        width: 100%;
        background: #2184d8;
    }

    /* 头部 */
    .work-header {
        overflow: hidden;
    }

    .work-header__message {
        line-height: 70px;
        ;
    }

    .work-header__logo {
        display: block;
        height: 40px;
        margin-top: 15px;
        margin-left: 80px;
    }

    .work-header__position {
        float: left;
        line-height: 70px;
        margin-left: 7%;
        color: white;
        font-size: .9rem;
    }

    .work-header__position a {
        color: white;
    }

    .work-header__user {
        float: right;
        margin-right: 24px;
    }

    .work-header__user p {
        float: left;
        margin: 0px 6px;
    }

    .work-header__user i {
        float: left;
        line-height: 70px;
        color: white;
        margin: 0px 6px;
    }

    .work-header__message {
        float: left;
        height: 100%;
        padding: 0px 10px;
        cursor: pointer;
        transition: .3s all;
    }

    .work-header__message:hover {
        background: #1a74c0;
    }

    .work-header__my {
        float: left;
        height: 100%;
        padding: 0px 10px;
        cursor: pointer;
        transition: .3s all;
    }

    .work-header__my:hover {
        background: #1a74c0;
    }

    .work-header__my img {
        width: 40px;
        height: 40px;
        border-radius: 1000px;
        margin-top: 15px;
    }

    .work-header__logout {
        float: left;
        height: 100%;
        padding: 0px 10px;
        cursor: pointer;
        transition: .3s all;
    }

    .work-header__logout:hover {
        background: #1a74c0;
    }

    .work-header__message__button {
        font-size: 1rem;
        color: white;
    }

    /* 工作区 */
    .work-content {
        padding: 24px;
    }

    .work-content__menu h4 {
        padding-top: 16px;
        font-size: 1.1rem;
        line-height: 35px;
        margin-left: 10px;
    }

    .work-content__menu span {
        text-indent: 1em;
        font-size: .5rem;
    }

    .work-content .box-card .work-content__menu__list {
        cursor: pointer;
        overflow: hidden;
        transition: .3s all;
        padding: 15px 10px;
        border-radius: 3px;
        margin-top: 12px;
    }

    .work-content .iconfont {
        color: #485a6a;
        font-size: 1.8rem;
        float: left;
        line-height: 25px;
        display: block;
        transition: .3s all;
    }

    .work-content p {
        line-height: 25px;
        font-size: .8rem;
        color: #485a6a;
        float: left;
    }

    .work-content .work-content__article {
        margin-left: 16px;
    }

    .work-content .work-content__details {
        float: right;
    }

    .work-content .box-card .work-content__menu__list:hover {
        background: #1a74c0;
    }

    .work-content .box-card .work-content__menu__list:hover p {
        color: white;
    }

    .work-content .box-card .work-content__menu__list:hover .iconfont {
        color: white;
    }

    .work-content--active {
        background: #1a74c0;
    }

    .work-content--active .iconfont {
        color: white;

    }

    .work-content--active p {
        color: white;

    }

    /* 主体 */
    .work-content__body__banner {
        width: 100%;
    }

    .work-content__body h5 {
        color: #2184d8;
        font-weight: bold;
        font-size: 1.4rem;
    }

    .work-content__body__substance {
        margin-top: 16px;
    }

    .work-content__body__text {
        margin: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .work-content__body__card__box {
        width: 100%;
        /* margin: 0px !important; */
    }

    .work-content__body__card__info {
        margin-top: 20px;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .work-content__body__card__warp {
        border-radius: 3px;
        overflow: hidden;
        box-shadow: 0px 0px 4px 2px #e2e2e2;
    }

    .work-content__body__card__title {
        position: absolute;
        bottom: 0px;
        left: 0px;
    }

    .work-content__body__card__title p {
        line-height: 35px;
        text-indent: 1em;
        color: white;
        padding-right: 12px;
        position: relative;
        font-size: .8rem;
        z-index: 2;
    }

    .work-content__body__card__title .back {
        position: relative;
        width: 100%;
    }

    .work-content__body__card__title .shadow {
        position: absolute;
        background: black;
        height: 35px;
        width: 100%;
        opacity: .5;
        z-index: 1;
    }

    .work-content__body__card__message {
        background: white;
        overflow: hidden;
        padding: 20px;
        padding-bottom: 25px;
    }

    .work-content__body__card__message p {
        font-size: .9rem;
        color: #868686;
    }

    .work-content__body {
        height: 100%;
    }

    /* 人物 */
    .work-content__body__detail {
        position: relative;
    }

    .work-content__body__detail .backs {
        width: 100%;
        display: block;
    }

    .work-content__body__title {
        position: absolute;
        padding-top: 8px;
        width: 90%;
        top: 0px;
        left: 5%;
        padding-bottom: 5px;
        border-bottom: 2px solid #dcdcdc;
        overflow: hidden;
    }

    .work-content__body__title .yellow {
        float: left;
        width: 5px;
        height: 20px;
        margin-top: 5px;
        background: yellow;
    }

    .work-content__body__title p {
        float: left;
        line-height: 30px;
        padding-left: 12px;
        color: white;
        font-size: .8rem;
    }

    .work-content__body__center {
        overflow: hidden;
        position: absolute;
        top: 45px;
        width: 100%;
        left: 0px;
    }

    .work-content__body__header {
        float: left;
        width: 40%;
    }

    .work-content__body__header img {
        width: 60%;
        border-radius: 1000px;
        margin-top: 15%;
        margin-left: 20%;
        display: block;
    }

    .work-content__body__message {
        float: left;
        width: 60%;
        margin-top: 7%;
    }

    .work-content__body__message p {
        width: 90%;
        color: white;
        font-size: .79rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* cross */
    .work-content__menu .el-card__body {
        padding: 14px;
    }

    .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .work-content .el-row,
    .work-content .el-row .work-content__menu,
    .work-content .el-row .work-content__menu .box-card {
        height: 100%;
    }

    /*新一代技术*/
    .technology {
        background: #fff;
        padding: 20px 30px;
        overflow: hidden;
    }

    /*标题*/
    .technologyTitle {
        height: 20px;
        border-bottom: 1px solid #e3dfe0;
        font-size: 15px;
        color: #333;
        padding-bottom: 17px;
        position: relative;
    }

    .technologyTitle p {
        float: left;
        width: 104px;
        text-align: center;
        margin-right: 60px;
        font-size: 16px;
    }

    .technologyTitle i {
        width: 104px;
        position: absolute;
        bottom: -2px;
        height: 3px;
        left: 0;
        background: #2184d7;
    }

    .Fournew {
        width: 100%;
        height: 300px;
    }

    .FournewList {
        overflow: hidden;
    }

    .FournewList ul {
        overflow: hidden;
    }

    .FournewList ul li {
        float: left;
        width: 23%;
        margin-left: calc(8%/3);
        background: #fff;
        box-shadow: 3px 10px 10px #fbfbfb;
        border: 1px solid #f5f5f5;
        margin-top: 30px;
        border-radius: 10px;
        padding: 20px;
        box-sizing: border-box;
    }

    .FournewList ul li:nth-child(4n+1) {
        margin-left: 0;
    }

    .FournewList img {
        float: left;
    }

    .FournewList ul li>div {
        float: right;
        width: calc(100% - 90px);
    }

    .FournewList div div {
        float: left;
        width: 50%;
        text-align: center;
        overflow: hidden;
        margin-top: 20px;
    }

    .FournewList p {
        float: none;
        color: #f56c73;
        font-size: 20px;
        font-weight: 900;
    }

    .FournewList span {
        display: block;
        color: #999;
        font-size: 12px;
        margin-top: 10px;
    }

    .FournewList h6 {
        font-size: 20px;
    }

    ul,
    ol {
        list-style: none;
    }

    /*经济占比*/
    .economic {
        margin-top: 20px;
    }

    .economic .technologyTitle p {
        width: auto;
    }

    .economic .technologyTitle i {
        width: 190px;
    }

    .economics {
        width: 100%;
        height: 300px;
        margin-top: 50px;
    }

    /*对地对标*/
    .OftheStandard>div {
        overflow: hidden;
    }

    .OftheStandard div div {
        float: left;
        width: 50%;
        margin-top: 20px;
    }

    .OftheStandard p {
        float: left;
        width: 50px;
        font-size: 18px;
        color: #2480d3;
        text-align: right;
    }

    .OftheStandard span {
        float: left;
        width: calc(90% - 50px);
        display: block;
        color: #333;
        font-size: 14px;
        margin-left: 10px;
    }

    .introduce ul {
        overflow: hidden;
        margin-top: 15px;
    }

    .introduce ul li {
        width: calc(100% / 6);
        float: left;
    }

    .introduce img {
        float: left;
    }

    .introduce div {
        float: left;
        width: calc(100% - 90px);
    }

    .introduce p {
        float: none;
        font-size: 20px;
        color: #333;
        margin-top: 10px;
    }

    .introduce span {
        color: #333;
        font-size: 12px;
    }

    .introduce i {
        color: #ff8e51;
    }

    .introduce ul li:nth-child(2) i {
        color: #01a894;
    }

    .introduce ul li:nth-child(3) i {
        color: #2382ee;
    }

    .introduce ul li:nth-child(4) i {
        color: #ff916d;
    }

    .introduce ul li:nth-child(5) i {
        color: #639fff;
    }

    .introduce ul li:nth-child(6) i {
        color: #51ccc9;
    }

    /*工业*/
    .industrial {
        overflow: hidden;
    }

    .industrial>div {
        width: 45%;
        float: left;
        margin-left: calc(10% - 120px);
    }

    .industrial>div:nth-child(2n+1) {
        margin-left: 0;
    }

    .industrial .economic .technologyTitle i {
        width: 90px;
    }

    .industrial .economics {
        float: none;
        margin: 0 auto;
    }


    .industrialeconomic p {
        text-align: center;
        float: none;
    }

    .industrialeconomicp {
        position: relative;
        margin-top: -50px;
        display: block;
    }

    .shuzngyin {
        width: 100%;
        height: 300px;
    }

    /*园区*/
    #tb2 tr {
        background-color: #fff0f5;
        width: 100%;
        height: 30px;
        line-height: 30px;
    }

    /*奇数行样式*/
    #tb2 tr:nth-child(odd) {
        background-color: #f9f9f9;
    }

    #tb2 tr {
        background-color: #fff;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        font-size: 12px;
    }

    /*奇数行样式*/
    #tb2 tr:nth-child(odd) {
        background-color: #f9f9f9;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
    }

    #tb2 tr td,
    #tb2 tr,
    tr,
    tr td {
        border: none;
    }

    #tb2 tr:nth-child(odd) td {
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
    }

    #tb1 {
        border: none;
        width: 100%;
        text-align: center;
        font-size: 12px;
    }

    #tb1 tr {
        line-height: 50px;
    }

    /*综分*/
    .economicsgrowth4 {
        width: 50%;
        float: left;
    }

    #allmap {
        height: 300px;
    }

    /*园区经济*/
    .industrial .yuanqu {
        width: calc(100% - 60px);
        margin-left: 0;
        margin-top: 20px;
    }

    .xiangmuyuanqu {
        overflow: hidden;
        margin-top: 20px;
    }

    .xiangmuyuanqu div {
        float: left;
        margin-left: 30px;
    }

    .xiangmuyuanqu label {
        font-size: 12px;
        color: #333;
        line-height: 35px;
        text-align: center;
        width: 85px;
    }

    .xiangmuyuanqu input {
        width: 200px;
        background: #f6f7fb;
        font-size: 14px;
        color: #666;
        line-height: 33px;
        border: 1px solid #eee;
        border-radius: 6px;
        padding-left: 20px;
        margin-left: 20px;
    }

    .xiangmuyuanqu button {
        font-size: 14px;
        width: 90px;
        text-align: center;
        line-height: 35px;
        background: #2184d9;
        border: none;
        color: #fff;
        margin-left: 20px;
        border-radius: 6px;
    }
</style>
<script>
    window.onload = function () {
        $(".work-content").height($(window).height() - 120)
    }
    window.onresize = function () {
        $(".work-content").height($(window).height() - 120)
    }
    new Vue({
        el: "#canvas",
        data: {
            names: "",
            people: {
                where: []
            },
            menus: [{
                icon: "icon-ic_project",
                name: "十强产业",
                href: "./shiqiang.html"
            }, {
                icon: "icon-tubiaozhuzhuangtu",
                name: "数据查询",
                href: "./shujuchaxun.html"
            }, {
                icon: "icon-shishijiance",
                name: "四新监测",
                href: "./sixinjiance.html"
            }, {
                icon: "icon-fanghu",
                name: "重大项目监测",
                href: "./zhongdianxiangmu.html"
            }, {
                icon: "icon-symmetric",
                name: "对地对标",
                href: "./duididuibiao.html"
            }, {
                icon: "icon-gaosugongluyunyingshujufenxi",
                name: "街道概览",
                href: "./street.html"
            }, {
                icon: "icon-yuanshigongzuozhan",
                name: "工作站概览",
                href: "./work.html"
            }],
            tableData: [{
                date: '金华县清华园外国语学校扩建项目',
                name: '金华县清华园外国语学校扩建项目',
                time: '2019-00-01',
                jine: '2000',
                zouzi: '21'
            }, {
                date: '金华县清华园外国语学校扩建项目',
                name: '金华县清华园外国语学校扩建项目',
                time: '2019-00-01',
                jine: '2000',
                zouzi: '21'
            }, {
                date: '金华县清华园外国语学校扩建项目',
                name: '金华县清华园外国语学校扩建项目',
                time: '2019-00-01',
                jine: '2000',
                zouzi: '21'
            }, {
                date: '金华县清华园外国语学校扩建项目',
                name: '金华县清华园外国语学校扩建项目',
                time: '2019-00-01',
                jine: '2000',
                zouzi: '21'
            }],
            search: ''
        },
        mounted: function () {
            //表格
            function handleEdit(index, row) { }
            handleEdit()

            function handleDelete(index, row) { }
            handleDelete()
            var _this = this
            // if (!getQueryVariable("name")) {
            //     history.go(-1)
            // } else {
            //     _this.names = unescape(getQueryVariable("name"))
            //     $.ajax({
            //         url: "./map/people.json",
            //         success: function (req) {
            //             _this.people = req.filter(function (s) {
            //                 return new RegExp(_this.names.substr(0, _this.names.length -
            //                     3)).test(s.lab)
            //             })[0]
            //         }
            //     })
            // }

            function getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1];
                    }
                }
                return (false);
            }


            //点击切换图标
            $('.technologyTitle').on('click', ' p', function () {
                $('.technologyTitle i').css({
                    'left': $(this).index() * 104 + 60 * $(this).index(),
                    'transition': '1s'
                })
            })
            //
            //增速
            function zengsu(text1, text2, text5, color, colorq, colorqo, coloo,
                data1, data2, data3, data4) {
                option = {

                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: function (params) {
                            var tar;
                            for (var i = 0; i < params.length; i++) {
                                if (params[i].value != '') {
                                    tar = params[i]
                                    break
                                }
                            }

                            return tar.name + ' : ' + tar.value;
                        }
                    },
                    legend: {
                        data: [text1, text2]
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        splitLine: {
                            show: false
                        },
                        data: ['项目一', '项目二', '项目三', '项目四']
                    },
                    yAxis: [{
                        type: 'value',
                        name: text5,
                        position: 'left',
                        interval: 200,

                    },],
                    series: [{
                        name: text1,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: color,
                            }

                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'top'
                            }
                        },
                        data: data1
                    },
                    {
                        name: text2,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: colorq,
                            }
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'bottom'
                            }
                        },
                        data: data2
                    },
                    {
                        name: text2,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: colorqo,
                            }
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'bottom'
                            }
                        },
                        data: data3
                    },
                    {
                        name: text2,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: coloo,
                            }
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'bottom'
                            }
                        },
                        data: data4
                    },
                    ]
                };
                return option
            }
            var myChart2 = echarts.init(document.getElementById('growth0'));
            //渲染
            myChart2.setOption(zengsu('济宁', '任城', '亿元', '#4eaaeb',
                '#f94050', '#24cfe0', '#8f44ad', [200, '', '', ''], ['', 200, '', ''], ['', '', 200,
                ''
            ], ['', '', '', 400]));
            // 百度地图API功能
            var map = new BMap.Map("allmap");
            var point = new BMap.Point(116.331398, 39.897445);
            map.centerAndZoom(point, 12);

            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function (r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    var mk = new BMap.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                } else {
                    alert('failed' + this.getStatus());
                }
            }, {
                enableHighAccuracy: true
            })

        }
    })
</script>

</html>