初识高德地图

2021/6/10 18:30:39

本文主要是介绍初识高德地图,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

初次使用高德地图,做的小页面。记录一下
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/demo.css">
    <script src="https://webapi.amap.com/maps?v=1.3&key=92a8e896bae2152c2961181db93c6d45"></script>
    <title>附近门店</title>
</head>
<body>
    <div id="app">
        <div id="Container" style="position:relative;"></div> 
        <div class="edit-box" v-if="!oneStore_status">
            <div class="tab-box">
                <div class="tab">
                    <select v-model="store_type" @change='choose_type'>   
                        <option value ="allStores" selected="selected">全部</option>
                        <option value ="kangjie">康洁</option>
                        <option value="kelaian">客来安</option>
                        <option value="yunxi">云洗</option>
                    </select>
                </div>
                <div class="search-box">
                    <input type="text" id="" v-model="search_words" @input='search' @confirm='search' placeholder="请输入门店关键词">
                    <img src="img/search.png" alt="" @click="search" class="search_img">
                </div>
            </div>
            <section class="wrapper-list__title1">
                <ul class="wrapper-list" >
                    <li class="wrapper-list-item" v-for="(item,index) in now_list" :key='item.id' @click='choose_store(item,index)'>
                        <img class="wrapper-list__img" src="./img/list_icon1.png" alt="">
                        <div class="wrapper-list__rig">
                            <div class="wrapper-list__title">
                                <!-- 云洗 - 云溪君泰中央公园店 -->
                                {{item.type}}  -  {{item.name}}
                            </div>
                            <div class="wrapper-list__des">
                                {{item.disCH}} | {{item.add}}
                            </div>
                        </div>
                    </li>
                </ul>
            </section>
        </div>
        <!-- 某个店的信息 -->
        <div v-if="oneStore_status" class="oneStore">
            <div class="store-top">
                <img @click="oneStore_status = false;mapData.zoom = 11" src="./img/goBack.png" alt="" class="goBack">
                <span class="store-detail">商家详情</span>
            </div>
            <div class="store-info">
                <img :src="oneStore.img" alt="" class="store-img">
                <div style="margin-right: 16px;">
                    <div class="store-name">{{oneStore.type}} - {{oneStore.name}}</div>
                    <div class="store-distance">{{oneStore.disCH}} | {{oneStore.add}}</div>
                </div>
                <img  @click='callPhone' src="./img/phone1.png" alt="" class="phone-img">
            </div>
        </div>
        <div v-if="tip" class="nostore-tip">
            无此门店!
        </div>
    </div>
</body>
</html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>

    new Vue({
        el: '#app',
        data: function () {
            return { 
                // 无此门店提示信息
                tip:false,
                // 某个门店信息
                oneStore_status:false,
                oneStore:{},
                // 地图有关
                mapData:{
                    zoom: 11, //级别
                    animateEnable: true,
                    resizeEnable: true, 
                },
                locationM:'',
                LocationO:'',
                markerData:[],
                
                // 门店搜索
                store_type:'',
                search_words:'',
                now_list:[],

                // 门店数据
                kangjie:[{
                        "id": "74",
                        "name": "门店1",
                        "center": "112.731227,37.74429",
                        "type": "康洁",
                        "tel": "16603467747",
                        "area": "榆次区",
                        "add": "高校新区山西传媒学院生活服务广场",
                        "linkman": "田营军",
                        "img": "img/kangjie/chuanmei.jpg",
                        "subDistricts": []
                    }],
                kelaian:[ {
                        "id": "76",
                        "name": "门店2",
                        "center": "112.547731,37.803517",
                        "type": "客来安",
                        "tel": "15364964755",
                        "area": "小店区",
                        "add": "大马北高层",
                        "linkman": "张丽芳",
                        "img": "img/kelaian/taizhongkelaiandian.png",
                        "subDistricts": []
                    }, {
                        "id": "77",
                        "name": "门店3",
                        "center": "112.531741,37.848228",
                        "type": "客来安",
                        "tel": "15110384205",
                        "area": "万柏林区",
                        "add": "新晋祠路幸福里小区负三层西南角D001",
                        "linkman": "李小丹",
                        "img": "img/kelaian/xingfuli.jpg",
                        "subDistricts": []
                    }],

                yunxi:[{
                            "id": "107",
                            "name": "门店4",
                            "center": "112.518483,37.818455",
                            "type": "云洗",
                            "tel": "15534057111",
                            "area": "万柏林区",
                            "add": "金虎便利(3297远大凤玺湾东门店)",
                            "linkman": "",
                            "img": "img/yunxi/juntai.jpg",
                            "subDistricts": []
                    }],
                allStores:[],
            }

        },
        created(){
            this.allStores = this.kangjie.concat(this.kelaian,this.yunxi)
            this.now_list = this.allStores
            this.store_type = 'allStores'
        },
        methods:{
            // js联系商家
            callPhone(){
                 window.location.href = "tel:" + this.oneStore.tel;
            },
            // 选择门店
            choose_store(item){
                var markerIcon = new AMap.Icon({
                    image: 'img/current_img.png',
                    size: new AMap.Size(20, 35),
                    imageSize: new AMap.Size(20, 35)
                });
                var selectedIcon = new AMap.Icon({
                    image: 'img/map_label_bg.png',
                    size: new AMap.Size(49, 65),
                    imageSize: new AMap.Size(49, 65)
                });
                this.map.setZoom(15);
                this.oneStore_status = true
                this.oneStore = item
                // 点击门店,地图显示到该门店的位置
                let _lnglat = item.center.split(',')
                this.map.panTo(new AMap.LngLat(_lnglat[0],_lnglat[1]));
                this.map.setZoom(18);
                this.markerData.forEach(v=>{
                    if(v.Qi.id == item.id){
                        var MarkerItem = v
                        setTimeout( () => {
                            MarkerItem.setLabel(this.markerLabel(item.type)); // 点击详情添加label
                            MarkerItem.setIcon(selectedIcon); // 点击详情后切换图标
                        }, 200)
                    }else{

                    }
                })
                
            },
            // 定位到某个门店时,marker换掉
            markerLabel(title){
                return {
                    offset: new AMap.Pixel(0, 14), //设置文本标注偏移量
                    content: '<div class="go-gaode">点击下方标记点去高德地图 ></div><div class="map-icon">' + title + '</div>', //设置文本标注内容
                    direction: 'right' //设置文本标注方位
                }
            },
            // 地图初始化
            initMap(){
                let map = new AMap.Map("Container", this.mapData);
                // 地图工具
                map.plugin(["AMap.ToolBar"], function () {
                    map.addControl(new AMap.ToolBar({
                        liteStyle: true,
                        position: 'RT',
                        offset: new AMap.Pixel(10, 30)
                    }));
                });
                // 定位自己的位置
                map.plugin('AMap.Geolocation', () => {
                    var geolocation = new AMap.Geolocation({
                        enableHighAccuracy: true,//是否使用高精度定位,默认:true
                        timeout: 10000,          //超过10秒后停止定位,默认:5s
                        buttonPosition:'RB',    //定位按钮的停靠位置
                        showMarker: true,//是否显示定位点
                        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
                        zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
                        showCircle: true
                    });
                    map.addControl(geolocation);
                    geolocation.getCurrentPosition((status,result)=>{
                        if(status=='complete'){
                            onComplete(result)
                            this.distance()
                        }else{
                            console.log('eee');
                            one rror(result)
                        }
                    });
                });
                //解析定位结果
                function onComplete(data) {
                    this.locationM = data.position.M
                    this.locationO = data.position.O
                }
                //解析定位错误信息
                function one rror(data) {
                    console.log(data,789987978)

                }
                this.map = map
                this.updateMarker()
            },
            // 计算距离
            distance(){
                this.now_list.map(function (val, key) {
                    val.dis = ''
                    let centerArr = val.center.split(',');
                    // // 我的位置与门店的距离
                    var lnglat = new AMap.LngLat(locationM, locationO); //我的位置
                    val.dis = lnglat.distance(centerArr) //门店的位置
                    val.dis = Number(val.dis.toFixed(1));
                })
                this.now_list = this.now_list.sort(function (e, f) {
                    return e.dis - f.dis
                })
                this.now_list.map(function (val, key) {
                    if (String(val.dis).indexOf('m') === -1) {
                        if (val.dis > 0) {
                            if (val.dis > 1000) {
                                disCH = (val.dis / 1000).toFixed(1) + 'km';
                            } else {
                                disCH = val.dis.toFixed(1) + 'm';
                            }
                            val.distance
                        } else {
                            disCH = '未知';
                        }
                        val.disCH = disCH
                    }
                })
            },
            // 地图标点
            updateMarker(){
                // 清除之前的标点
                this.map.clearMap()
                this.markerData = []
                // 添加新的点标记
                this.now_list.forEach(v => {
                    let jingweidu = v.center.split(',')
                    let marker = new AMap.Marker(
                        {
                            position: new AMap.LngLat(jingweidu[0], jingweidu[1]),
                            offset: new AMap.Pixel(-10, -10),
                            // icon: icon, // 添加 Icon 实例
                            title: v.name,
                            zoom: 13,
                            tel: v.tel,
                            linkman: v.linkman,
                            type: v.type,
                            area: v.area,
                            add: v.add,
                            img: v.img,
                            map: this.map,
                            id:v.id
                        }
                    );
                    this.markerData.push(marker)
                    this.map.add(this.markerData)
                    //点击地图上的marker携带目标地点跳入高德地图网页
                    marker.on('click',(e)=>{
                        marker.markOnAMAP({
                            position:marker.getPosition()
                        })
                    })
                });
            },
           
            // -------------------关于门店搜索start-------------------
            // 选择门店类型
            choose_type(){
                this.now_list = this[this.store_type]
                this.mapData.zoom = 14
                this.updateMarker()
                this.map.setFitView(); 
                this.distance()
            },
            // 搜索门店
            search(){
                this.now_list = this[this.store_type].filter(v=>{
                    return v.name.includes(this.search_words)
                })
                if(this.now_list.length == 0){
                    this.tip = true
                    setTimeout(()=>{
                        this.tip = false
                    },1500)
                }
            }
            
        },
        mounted: function () {
            this.initMap()
            this.store_type = 'allStores'
        }
    })
</script>


这篇关于初识高德地图的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程