老师,点击当前li时不获取Q和R值,直接设置成this.location.lnglat可以吗?

来源:4-2 地图搜索(2)

前端菜鸟HH

2020-09-17 16:06:33

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>高德地图</title>

<style>

*{

margin: 0;

padding: 0;

list-style: none;

}

input{

outline: none;

}

#container{

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

}

.box{

width: 350px;

height: auto;

background: #fff;

position: absolute;

top: 10px;

left: 10px;

box-shadow: 0 0 15px #000;

z-index: 5;

text-align: center;

padding: 10px;

}

</style>

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=75776648e2fd2fd601c4de9518b89b65"></script>

</head>

<body>

<div id="container">

<div class="box">

<input type="text" id="searchNode" />

<ul id="myUl"></ul>

</div>

</div>

<script type="text/javascript">

var map = new AMap.Map('container', {

zoom: 11,

center: [116.397428, 39.90923]

});

AMap.plugin('AMap.autocomplete', function(){

searchNode.oninput = function(){

myUl.innerHTML = '';

if(this.value == ''){

return;

}

new AMap.Autocomplete().search(this.value, function(status, data){

console.log(data);

for(var i = 0; i < data.tips.length; i++){

var myli = document.createElement('li');

myli.innerHTML = data.tips[i].name;

//myli.Q = data.tips[i].location.Q

//myli.R = data.tips[i].location.R;

myUl.append(myli);

myli.onclick = function(e){

//map.setCenter([this.Q,this.R]);

map.setCenter(this.location.lnglat);

}

}

})

}

})

</script>

</body>

</html>


写回答

1回答

好帮手慕久久

2020-09-17

同学你好,不可以,因为在li的点击事件中,this指代的是点击的那个li,而li本身是没有location这个属性的,如下:

http://img.mukewang.com/climg/5f631e1e0954775605560114.jpg

http://img.mukewang.com/climg/5f631e17097a4f9803510078.jpg

点击li时,获取不到Q和R,是因为获取到的data数据中,location没有Q、R属性,如下:

http://img.mukewang.com/climg/5f631e63094177b706180380.jpg

所以我们可以判断一下,如果location的数据结构,不符合要求,就不要动态生成li了,如下:

http://img.mukewang.com/climg/5f631f2409e4bcbf09240669.jpg

同学试试。

如果我的回答帮到了你,欢迎采纳,祝学习愉快!

0

0 学习 · 6815 问题

查看课程