知识点：在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中引入

<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实例：

<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>

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. UVA12470—Tribonacci （类似斐波那契，简单题）

    题目链接:https://vjudge.net/problem/UVA-12470 题目意思:我们都知道斐波那契数列F[i]=F[i-1]+F[i-2],现在我们要算这样的一个式子T[i]=T[i-1 ...

  2. c# 下三角实现 九九乘法口诀表

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Hell ...

  3. the age of the TCP connection TCP Slow Start

    w防止网络过载和拥塞 HTTP The Definitive Guide The performance of TCP data transfer also depends on the age of ...

  4. llvm,gcc

    GCC,LLVM,Clang编译器对比   在XCode中,我们经常会看到这些编译选项(如下图),有些人可能会有些茫然,本文将对GCC4.2.LLVM GCC 4.2.LLVM compliler 2 ...

  5. 确定比赛名次---hdu1285（拓扑排序）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1285 拓扑序就是求一个序列 数 a 出现在数 b 前面,最终输出满足条件的序列即可: 过程就是每次选取 ...

  6. error: https://packages.elastic.co/GPG-KEY-elasticsearch: import read failed(2).

    安装filebeat报错: curl: (35) SSL connect errorerror: https://packages.elastic.co/GPG-KEY-elasticsearch: ...

  7. 玩转DOM遍历——用NodeIterator实现getElementById，getElementsByTagName方法

    先声明一下DOM2中NodeIterator和TreeWalker这两类型真的只是用来玩玩的,因为性能不行遍历起来超级慢,在JS中基本用不到它们,除了<高程>上有两三页对它的讲解外,谷歌的 ...

  8. Mysql-xtrabackup 与MySQL5.7 binlog 实现数据即时点恢复

    Mysql-xtrabackup 与MySQL5.7 binlog  实现数据即时点恢复 一.数据库准备 1. rpm -e mariadb-libs postfix tar xf mysql-5.7 ...

  9. web.xml中的元素

    error-page元素包含三个子元素error-code,exception-type和location.将错误代码(Error Code)或异常(Exception)的种类对应到web应用资源路径 ...

  10. matlab 保存图片的几种方式

    最近在写毕业论文, 需要保存一些高分辨率的图片. 下面介绍几种MATLAB保存图片的 方式. 一. 直接使用MATLAB的保存按键来保存成各种格式的图片 你可以选择保存成各种格式的图片,  实际上对于 ...