欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

腾讯地图在H5的局部应用

程序员文章站 2022-04-21 20:33:25
...

效果图
腾讯地图在H5的局部应用
1.首先我们需要引入腾讯的位置服务js（key值在腾讯位置服务中获取）。

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=2.exp&key=此处为你的key值"></script>

2.第二步我们要在页面创建一个div，用于放置地图。

        <div id="map">

        </div>

提示：一定要给地图设置好宽高哦

3.第三步，我们需要在JS中定义一个方法（用于创建地图）此处我用了vue的写法，如有其他需求请自行修改

  			//获取地图
            initMap() {
                //定义地图中心点坐标
                var center = new TMap.LatLng(22.683770, 114.228270)
                //定义map变量，调用 TMap.Map() 构造函数创建地图
                var map = new TMap.Map(document.getElementById('map'), {
                    center: center, //设置地图中心点坐标
                    zoom: 17, //设置地图缩放级别
                });
                //创建并初始化MultiMarker
                var markerLayer = new TMap.MultiMarker({
                    map: map, //指定地图容器
                    //样式定义
                    styles: {
                        //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
                        "myStyle": new TMap.MarkerStyle({
                            "width": 30, // 点标记样式宽度（像素）
                            "height": 35, // 点标记样式高度（像素）
                            "src": 'https://sucai.suoluomei.cn/sucai_zs/images/20200523151828-mapbj.png', //图片路径
                            //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
                            "anchor": {
                                x: 16,
                                y: 32
                            }
                        })
                    },
                    //点标记数据数组
                    geometries: [{
                        "id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                        "styleId": 'myStyle', //指定样式id
                        "position": new TMap.LatLng(22.683770, 114.228270), //点标记坐标位置
                        "properties": { //自定义属性
                            "title": "marker1"
                        }
                    }]
                });
            },

4.调用此方法(vue在mounted中调用)，如果使用的是原生，可以在body处使用οnlοad="方法名"调用

        mounted() {
            this.initMap()
        },

效果图代码附上

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

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/aaa@qq.com/lib/index.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>充电站详情</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        [v-cloak] {
            display: none !important;
        }

        img {
            width: 100%;
            height: 100%;
        }

        body {
            background: #f5f5f5;
        }

        .top {
            width: 90%;
            padding: .9375rem 5%;
            background: white;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .top_img {
            width: 25%;
            height: 5.27375rem;
        }

        .top_img>img {
            object-fit: cover;
        }

        .top_title {
            width: 70%;
            margin-left: 5%;
            height: 5.27375rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        #map {
            width: 100%;
            height: 7.8125rem;
        }

        .address {
            width: 90%;
            padding: .9375rem 5%;
            background: white;
            display: flex;
            margin-bottom: 0.5rem;
        }

        .address_span {
            width: 85%;
            color: #8f8f8f;
            font-size: .8125rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .address_bt {
            width: 15%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .address_icon {
            width: 50%;
        }

        .address_bt_span {
            font-size: .8125rem;
            color: #7b7b7b;
        }

        .details {
            width: 100%;
            background: white;
        }

        .details_border {
            width: 90%;
            padding: .9375rem 5%;
            border-bottom: .0625rem solid #f5f5f5;
            display: flex;
            justify-content: space-between;
            font-size: .875rem;
        }

        .details_border>span:nth-child(1) {
            color: #363636;
        }

        .details_border>span:nth-child(2) {
            display: flex;
            justify-content: flex-end;
            width: 70%;
            color: #9b9b9b;
        }

        .border-none {
            border: none;
        }

        .prompt {
            width: 90%;
            padding: .9375rem 5%;
            background: white;
        }

        .prompt_span {
            width: 95%;
            color: #f18449;
            background: #fff7e6;
            font-size: .875rem;
            padding: .3125rem 2.5%;
            border-radius: .1875rem;
        }

        .scan {
            width: 90%;
            padding: .3125rem 5%;
            background: white;
            position: fixed;
            bottom: 0;
        }

        .scan_span {
            width: 95%;
            padding: .625rem 2.5%;
            border-radius: .1875rem;
            font-size: 1rem;
            color: white;
            display: flex;
            justify-content: center;
            background: #07C160;
        }
    </style>
</head>

<body>
    <div v-cloak id="Vue">
        <div class="top">
            <div class="top_img">
                <img src=http://img3.imgtn.bdimg.com/it/u=1048070904,952621251&fm=26&gp=0.jpg"" alt="">
            </div>
            <div class="top_title">
                <span>深圳名居广场充电站</span>
                <span>116个交流桩</span>
            </div>
        </div>

        <div id="map">

        </div>

        <div class="address">
            <span class="address_span">广东省深圳市龙岗区深惠高速公路196号</span>
            <div class="address_bt">
                <div class="address_icon">
                    <img src="https://sucai.suoluomei.cn/sucai_zs/images/20200617101817-dh1.png" alt="">
                </div>
                <span class="address_bt_span">1.6km</span>
            </div>
        </div>

        <div class="details">
            <div class="details_border">
                <span>运营商</span>
                <span>特来电</span>
            </div>
            <div class="details_border border-none">
                <span>充电单价</span>
                <span>1.55~1.55/度</span>
            </div>
            <div class="details_border">
                <span>停车费</span>
                <span>停车收费，以场地公告为准！</span>
            </div>
            <div class="details_border border-none">
                <span>支付方式</span>
                <span>建行聚支付</span>
            </div>
            <div class="details_border">
                <span>营业时间</span>
                <span>周一至周日00.00-24.00</span>
            </div>
            <div class="details_border">
                <span>服务电话</span>
                <span>4001-300-001</span>
            </div>
        </div>

        <div class="prompt">
            <div class="prompt_span">以上信息和充电服务由特来电提供，如有疑问请拨打上方特来电服务电话</div>
        </div>

        <div class="scan">
            <div @click="scan" class="scan_span">扫一扫</div>
        </div>
    </div>
</body>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/npm/aaa@qq.com/lib/vant.min.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/jweixin/jweixin-1.4.0.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=2.exp&key=GV4BZ-COE3X-AAN45-TW4LF-GVVMF-SYBT4"></script>
<script>
    wx.config({
        debug: false,
        appId: '<?php echo $signPackage["appId"]; ?>',
        timestamp: '<?php echo $signPackage["timestamp"]; ?>',
        nonceStr: '<?php echo $signPackage["nonceStr"]; ?>',
        signature: '<?php echo $signPackage["signature"]; ?>',
        jsApiList: ['scanQRCode']
    })
    window.alert = function (name) {
        var iframe = document.createElement("IFRAME");
        iframe.style.display = "none";
        iframe.setAttribute("src", 'data:text/plain,');
        document.documentElement.appendChild(iframe);
        window.frames[0].window.alert(name);
        iframe.parentNode.removeChild(iframe);
    }
    new Vue({
        el: "#Vue",
        data: {

        },
        created() {
            document.documentElement.style.fontSize = 16 * document.documentElement.clientWidth / 375 + 'px';
            // this.initMap()
        },
        mounted() {
            this.initMap()
        },
        methods: {
            //获取地图
            initMap() {
                //定义地图中心点坐标
                var center = new TMap.LatLng(22.683770, 114.228270)
                //定义map变量，调用 TMap.Map() 构造函数创建地图
                var map = new TMap.Map(document.getElementById('map'), {
                    center: center, //设置地图中心点坐标
                    zoom: 17, //设置地图缩放级别
                });
                //创建并初始化MultiMarker
                var markerLayer = new TMap.MultiMarker({
                    map: map, //指定地图容器
                    //样式定义
                    styles: {
                        //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
                        "myStyle": new TMap.MarkerStyle({
                            "width": 30, // 点标记样式宽度（像素）
                            "height": 35, // 点标记样式高度（像素）
                            "src": 'https://sucai.suoluomei.cn/sucai_zs/images/20200523151828-mapbj.png', //图片路径
                            //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
                            "anchor": {
                                x: 16,
                                y: 32
                            }
                        })
                    },
                    //点标记数据数组
                    geometries: [{
                        "id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                        "styleId": 'myStyle', //指定样式id
                        "position": new TMap.LatLng(22.683770, 114.228270), //点标记坐标位置
                        "properties": { //自定义属性
                            "title": "marker1"
                        }
                    }]
                });
            },
            // 请求公共方法
            ajax(type, url, params, cb) {
                $.ajax({
                    type: type,
                    url: url,
                    data: params,
                    dataType: "json",
                    async: false,
                    success: (response) => {
                        cb(response)
                    }
                });
            },
            scan() {
                wx.scanQRCode({
                    needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                    success: function (res) {
                        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                    }
                });
            }
        }
    })
</script>

</html>

原理：只要给地图容器固定宽高，就不会影响容器外的html。

相关标签： html 腾讯地图

上一篇： Java中方法覆盖与方法重载的对比介绍

下一篇： js实现正则匹配中文标点符号的方法_javascript技巧

推荐阅读