vue使用百度地图实现地点查询-编程知识

vue使用百度地图实现地点查询

效果
在这里插入图片描述

代码
首先在index.html中引入script：

<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="icon" href="<%= BASE_URL %>favicon.ico"><title>地图</title><script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=地图密钥"></script>
</head>

页面中：

<template><div class="hello"><div id="l-map"></div><div id="r-result">请输入:<inputtype="text"id="suggestId"size="20"value="百度"style="width: 150px"/></div><divid="searchResultPanel"style="border: 1px solid #c0c0c0;width: 150px;height: auto;display: none;"></div></div>
</template><script>
export default {name: "baiduMap",data() {return {autocomplete: null,};},methods: {initMap() {let map = new BMapGL.Map("l-map");map.centerAndZoom("北京", 12); // 初始化地图,设置城市和地图级别。this.autocomplete = new BMapGL.Autocomplete({//建立一个自动完成的对象input: "suggestId",location: map,});this.autocomplete.addEventListener("onhighlight", function (e) {//鼠标放在下拉列表上的事件var str = "";var _value = e.fromitem.value;var value = "";if (e.fromitem.index > -1) {value =_value.province +_value.city +_value.district +_value.street +_value.business;}str ="FromItem<br />index = " +e.fromitem.index +"<br />value = " +value;value = "";if (e.toitem.index > -1) {_value = e.toitem.value;value =_value.province +_value.city +_value.district +_value.street +_value.business;}str +="<br />ToItem<br />index = " +e.toitem.index +"<br />value = " +value;document.getElementById("searchResultPanel").innerHTML = str;});let myValue;this.autocomplete.addEventListener("onconfirm", function (e) {//鼠标点击下拉列表后的事件var _value = e.item.value;myValue =_value.province +_value.city +_value.district +_value.street +_value.business;document.getElementById("searchResultPanel").innerHTML ="onconfirm<br />index = " +e.item.index +"<br />myValue = " +myValue;setPlace();});function setPlace() {map.clearOverlays(); //清除地图上所有覆盖物function myFun() {var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果map.centerAndZoom(pp, 18);map.addOverlay(new BMapGL.Marker(pp)); //添加标注}var local = new BMapGL.LocalSearch(map, {//智能搜索onSearchComplete: myFun,});local.search(myValue);}},},mounted() {this.initMap();},
};
</script>
<style lang="scss" scoped>
body,
html {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";font-size: 14px;
}
#l-map {height: 360px;width: 100%;
}
#r-result {width: 100%;
}
</style>