您的位置：首页 > Web前端 > JavaScript

高德地图模糊查询---JavaScript API

2017-11-30 15:27 519 查看

<body>
<div id="app">
<div>
<p><input type="text" v-model = 'search_address' id = 'address'></p>
<p>输入的地址：{{search_address}}</p>
<p>查询到的详细地址：{{formattedAddress}}</p>
<p>lng：{{lng}}</p>
<p>lat：{{lat}}</p>
</div>
</div>

<!-- 这个地图一定要存在，删除就会报错 -->
<div id="container" style="margin-top: 200px; width: 80%; height: 80%"></div>

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.2&key=你获取的JavaScriptAPI的key值&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>
<script type="text/javascript">

var _vm = new Vue({
data : {
search_address : '',
// formattedAddress : [],
// lng : [],
// lat : []
formattedAddress : '',
lng : '',
lat : ''

},
methods : {
/**
*  地理编码
*/
geocoder : function() {
var geocoder = new AMap.Geocoder({
// city: "010", //城市，默认：“全国”    // 这个要注释，不注释拿不到数据
radius: 1000 //范围，默认：500
});

//地理编码,返回地理编码结果
var _address = document.getElementById("address").value;   //输入你的地址

console.log('_address：', _address) ;

geocoder.getLocation(_address, function(status, result) {
if (status === 'complete' && result.info === 'OK') {

console.log(result) ;
console.log(result.geocodes) ;

var _formattedAddress = result.geocodes[0].formattedAddress ;
var _lng = result.geocodes[0].location.lng ;
var _lat = result.geocodes[0].location.lat ;

_vm.search_address = _formattedAddress ;
_vm.formattedAddress = _formattedAddress ;
_vm.lng = _lng ;
_vm.lat = _lat ;

// for(var i = 0; i < result.geocodes.length; i++){

//     var _formattedAddress = result.geocodes[i].formattedAddress ;
//     var _lng = result.geocodes[i].location.lng ;
//     var _lat = result.geocodes[i].location.lat ;

//     console.log("_formattedAddress：", _formattedAddress) ;
//     console.log('_lng：', _lng) ;
//     console.log('_lat：', _lat) ;

//     _vm.formattedAddress.push(_formattedAddress) ;
//     _vm.lng.push(_lng) ;
//     _vm.lat.push(_lat) ;

//     //
//     console.log('-------------------------------------------------') ;
//     console.log(_vm.formattedAddress) ;
//     console.log(_vm.lng) ;
//     console.log(_vm.lat) ;

// }

}
});
}
}
}).$mount('#app');

//地图加载
var map = new AMap.Map("container", {
resizeEnable: true
});
//输入提示
var autoOptions = {
input: "address"
};
var auto = new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
map: map
});

function select(e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name);  //关键字查询查询
_vm.geocoder() ;
}

//注册监听，当选中某条记录时会触发
AMap.event.addListener(auto, "select", select);

</script>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 高德地图 api 搜索模糊搜索实现

相关文章推荐

新的分享

章节导航