腾讯地图在H5的局部应用

最新推荐文章于 2024-05-30 11:05:30 发布

hy3528

最新推荐文章于 2024-05-30 11:05:30 发布

阅读量806

点赞数

分类专栏： html 腾讯地图

本文链接：https://blog.csdn.net/hy3528/article/details/106804355

版权

html 同时被 2 个专栏收录

73 篇文章 1 订阅

订阅专栏

腾讯地图

1 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述
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/vant@2.2/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/vant@2.2/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。

hy3528

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
腾讯地图在H5的局部应用

效果图、<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css"> <meta name="viewport" content="width=device-
复制链接

扫一扫

专栏目录