踩坑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;
}
}