zoukankan      html  css  js  c++  java
  • vue中使用百度地图,悬浮窗搜索功能

    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{
             400px;
            height: 400px;
            font-family: "微软雅黑";
            border:1px solid green;
        }
    </style>
  • 相关阅读:
    oracle proc 插入操作性能优化实践
    vmware 虚拟机共享文件夹无法显示问题解决
    oracle启动报错:ORA-03113
    c语言中sprintf()函数中的%使用
    c 的内存分配
    c实现队列
    c实现循环链表
    MantisBT导出Excel文件名显示中文的修改方法
    怎样通过Qt编写C/C++代码查询当前Linux的版本号?
    Kotlin Android Extensions: 与 findViewById 说再见 (KAD 04) -- 更新版
  • 原文地址:https://www.cnblogs.com/Byme/p/10214517.html
Copyright © 2011-2022 走看看