vue中使用百度地图,悬浮窗搜索功能
2019-01-03 09:56:12来源:博客园 阅读 ()
https://www.cnblogs.com/shuaifing/p/8185311.html 侵删
<template> <div id="all"> <input type="text" id="suggestId" name="address_detail" placeholder="地址" v-model="address_detail" class="input_style"> <div id="allmap"></div> </div> </template> <script> //import {MP} from '../../map' export default { data(){ return { address_detail: null, //详细地址 userlocation: {lng: "", lat: ""}, } }, mounted(){ this.$nextTick(function () { var th = this // 创建Map实例 var map = new BMap.Map("allmap"); // 初始化地图,设置中心点坐标, var point = new BMap.Point(121.160724,31.173277); // 创建点坐标,汉得公司的经纬度坐标 map.centerAndZoom(point, 15); map.enableScrollWheelZoom(); var ac = new BMap.Autocomplete( //建立一个自动完成的对象 { "input": "suggestId" , "location": map }) var myValue ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件 var _value = e.item.value; myValue = _value.province + _value.city + _value.district + _value.street + _value.business; this.address_detail = myValue setPlace(); }); function setPlace() { map.clearOverlays(); //清除地图上所有覆盖物 function myFun() { th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果 map.centerAndZoom(th.userlocation, 18); map.addOverlay(new BMap.Marker(th.userlocation)); //添加标注 } var local = new BMap.LocalSearch(map, { //智能搜索 onSearchComplete: myFun }); local.search(myValue); //测试输出坐标(指的是输入框最后确定地点的经纬度) map.addEventListener("click",function(e){ //经度 console.log(th.userlocation.lng); //维度 console.log(th.userlocation.lat); }) } }) }, } </script> <style scoped> #allmap{ width: 400px; height: 400px; font-family: "微软雅黑"; border:1px solid green; } </style>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 关于jQuery UI 使用心得及技巧 2020-03-29
- js中去掉字串左右空格 2020-03-20
- Js中如何使用sort() 2020-03-18
- vue.js开发环境搭建教程 2020-03-16
- 使用JS在浏览器中判断当前网络连接状态的几种方法 2020-03-12
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash