高德地图开发手绘地图

踩坑1：高德地图关键词搜索不生效。下面代码一定要

window._AMapSecurityConfig = {

            securityJsCode: "",密钥

        }

踩坑2：点击事件点击图片，父盒子e.target.innerText不会获取得到下面的文字，要使用e.currentTarget.innerText，才是你定义的盒子

//关键词点击事件
    let listItemArr = document.querySelectorAll('.tab')
    for (let index = 0; index < listItemArr.length; index++) {
        // 循环添加事件
        listItemArr[index].onclick = function (e) {
            keyword = e.currentTarget.innerText
            //关键字查询
                placeSearch.search(keyword, function (status, result) {
                    setTimeout(() => {
                        addMarker(result)
                    }, 100)
                })
            // });
       
            // 其余人清除 还得用for循环
            for (let i = 0; i < listItemArr.length; i++) {
                listItemArr[i].className = 'tab y-f'
            }
            // 留下自己
            this.className = 'tab y-f current'



        }

手绘地图主要的就是瓦片切图，网上寻找工具，将UI做好的图瓦片切好。瓦片切图是很重要的，文件名是x,y坐标和层级

 var host = window.location.origin;
    var tilerLayer = new AMap.TileLayer({
        zIndex: 1000,
        opacity: 1,   //图层透明度：1不透明，0为全透明

        getTileUrl: function (x, y, z) {
            var name = nameFormat
                .replace("{x}", x)
                .replace("{y}", y)
                .replace("{z}", z)
                ;
            return 'static/img/' + z + '/' + name + ext;
        }
    });
    tilerLayer.setMap(map);

导航跳转各种地图 分别是高德 百度 腾讯

 function goGeo(e) {
        e.stopPropagation(); //阻止冒泡
        window.location.href = `http://uri.amap.com/marker?position=${maplng},${maplat}&name=${mapname}&coordinate=gaode&callnative=1`
    }
    function goBaidu(e) {
        e.stopPropagation(); //阻止冒泡
        window.location.href = `http://api.map.baidu.com/marker?location=${maplat},${maplng}&title=${mapname}&content=${maptype}&output=html`
    }
    function goTx(e) {
        e.stopPropagation(); //阻止冒泡
        window.location.href = `http://apis.map.qq.com/uri/v1/marker?marker=coord:${maplat},${maplng};addr:${mapaddress}`
    }

微信环境就只跳腾讯

 //js判断是否是微信环境
    function isWechat() {
        //获取user-agaent标识头
        var ua = window.navigator.userAgent.toLowerCase();
        //判断ua和微信浏览器的标识头是否匹配
        if (ua.match(/micromessenger/i) == 'micromessenger') {
            goWxTx()
            return true;
        } else {
            var drawer = document.querySelector('.drawer');
            drawer.classList.toggle('open');
            return false;
        }
    }