知识点：在Vue.js项目中调用百度地图API，实现input框，输入地址，在百度地图上定位到准确地址，获得到经纬度

参考博客：  百度地图的引用，初步了解参考博客：http://blog.csdn.net/docallen/article/details/70877925

详细功能修改参考博客： https://www.cnblogs.com/NearTheSea/p/6808093.html

效果图：在input输入框中，输入要查询的地址，搜索出相关的名字

选中详细地址，地图定位到详细地址

1.申请密钥：

百度地图使用一个专门的密钥(ak)作为路径

在vue框架，的index.html中引入

  1. <body>
    <div id="app"></div>
    <!--引入百度地图API-->
    <script src='http://api.map.baidu.com/api?v=2.0&ak=？&callback=init'></script>
    </body>

2.map.js实例：

  1. <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 () {
  2.  
  3.                    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();
                       });
  4.  
  5.                    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));    //添加标注
                           }
  6.  
  7.                        var local = new BMap.LocalSearch(map, { //智能搜索
                               onSearchComplete: myFun
                           });
                           local.search(myValue);
  8.  
  9.                        //测试输出坐标（指的是输入框最后确定地点的经纬度）
                           map.addEventListener("click",function(e){
                               //经度
                               console.log(th.userlocation.lng);
                               //维度
                               console.log(th.userlocation.lat);
  10.  
  11.                        })
                       }
  12.  
  13.            })
           },
       }
    </script>
    <style scoped>
       #allmap{
            width: 400px;
            height: 400px;
            font-family: "微软雅黑";
            border:1px solid green;
        }
    </style>

Vue中使用百度地图——根据输入框输入的内容，获取详细地址的更多相关文章

  1. Vue中使用百度地图——设置地图标注

    知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...

  2. vue中实现百度地图

    1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...

  3. Vue --》 如何在vue中调用百度地图

    1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...

  4. vue中引入百度地图

    xxx.vue <template> <div> <el-input v-model="inputaddr"> </el-input> ...

  5. vue 中结合百度地图获取当前城市

    首先需要去百度地图开发者平台申请 ak http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5 在index.html 中引入script ...

  6. vue中使用百度地图vue-baidu-map

    安装 npm install vue-baidu-map --save 全局注册 全局注册将一次性引入百度地图组件库的所有组件.需在入口文件main.js中引入vue-baidu-map import ...

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

    https://www.cnblogs.com/shuaifing/p/8185311.html 侵删 <template> <div id="all"> ...

  8. VUE 中引入百度地图(vue-Baidu-Map)

    1.安装 $ npm install vue-baidu-map --save 2.全局注册,在main.js中引入以下代码 import BaiduMap from 'vue-baidu-map' ...

  9. vue 中引用 百度地图

    1.在 http://lbsyun.baidu.com/ 申请 秘钥 2.在index.html文件中引入 <script src="http://api.map.baidu.com/ ...

随机推荐

  1. HDU_5538_House Building

    House Building Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) ...

  2. 20190401-记录一次bug ConstraintViolationException

    org.hibernate.exception.ConstraintViolationException 违反唯一约束条件 导致这个问题的原因有很多种. 在查询数据库时发生了这样的错误,一般这样的问题 ...

  3. Python3量化技术常用插件

    1. 确定自己的系统为64位版本 2. 下载安装Python3 64位版本 如果要使用zipline,建议使用python3.5.另外发现很多东西要求的也是3.5. 主页地址: https://www ...

  4. 安装CentOS 7 文字版

    下载镜像 http://mirrors.163.com/ CentOS 7.4 http://mirrors.163.com/centos/7.4.1708/isos/x86_64/ 选择 CentO ...

  5. media query媒体查询

    媒体查询(CSS3 media query) 一.逻辑操作符:not.and.only not:not操作符用来对一条媒体查询的结果取反. and:and操作符用来把多个媒体属性组合起来,合并到同一条 ...

  6. [React-Native]入门(Hello World)

    (1)需要一台Mac(OSX),这个是前提,建议还是入手一本啦. (2)在Mac上安装Xcode,建议Xcode 6.3以上版本 (3)安装node.js:https://nodejs.org/dow ...

  7. 洛谷 P4211 [LNOI2014]LCA (树链剖分+离线)

    题目:https://www.luogu.org/problemnew/solution/P4211 相当难的一道题,其思想难以用言语表达透彻. 对于每个查询,区间[L,R]中的每个点与z的lca肯定 ...

  8. spark 作业提交

    kafka-topics.sh --describe --zookeeper xxxxx:2181 --topic testkafka-run-class.sh kafka.tools.GetOffs ...

  9. maven 介绍(二)

    本文内容主要摘自:http://www.konghao.org/index 内部视频 三.仓库 仓库:本地仓库:远程仓库:私有仓库(nexus) 1. nexus 的安装: 1). 下载并且解压缩 2 ...

  10. Web前端开发学习笔记（一）

    最近在复习Web前端的开发知识,于是就把大二上学期曾经学过的东西拿出来复习一遍,把自己在做曾经的作业时遇到有意义的点都记下来吧. Homework1:http://my.ss.sysu.edu.cn/ ...