当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue中使用百度地图，悬浮窗搜索功能

vue中使用百度地图，悬浮窗搜索功能

2019年01月04日  | 移动技术网IT编程  | 我要评论

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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网