知识点：在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. md5sum检验MD5值

    md5sum命令检验MD5值 md5sum命令用于生成和校验文件的md5值.它会逐位对文件的内容进行校验.是文件的内容,与文件名无关,也就是文件内容相同,其md5值相同.md5值是一个128位的二进制 ...

  2. Java编程：将具有父子关系的数据库表数据转换为树形结构，支持无限层级

    在平时的开发工作中,经常遇到这样一个场景,在数据库中存储了具有父子关系的数据,需要将这些数据以树形结构的形式在界面上进行展示.本文的目的是提供了一个通用的编程模型,解决将具有父子关系的数据转换成树形结 ...

  3. UVA10905: Children's Game（排序）

    题目:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=68990#problem/A 题目需求:,给n个数字,将它们重新排序得到一个最大的数 ...

  4. python全栈开发从入门到放弃之装饰器函数

    什么是装饰器#1 开放封闭原则:对扩展是开放的,对修改是封闭的#2 装饰器本身可以是任意可调用对象,被装饰的对象也可以是任意可调用对象#3 目的:''' 在遵循 1. 不修改被装饰对象的源代码 2. ...

  5. XDU 1037 倍流畅序列(字符串匹配+贪心)

    题目描述 对于一个0,1串s, 从左端开始读取它的0获得序列s0,从右端开始读取它的1获得s1,如果s0与s1同构,则称s为倍流畅序列.例如:011001是一个倍流畅序列, 因为:s0 = 0__00 ...

  6. [转]Raanan Fattal - Image and Video Upscaling from Local Self-Examples 图像放大

    转自:http://www.sigvc.org/bbs/thread-1032-1-1.html 论文链接:http://www.cs.huji.ac.il/~raananf/projects/lss ...

  7. rdesktop install notes

    在centos7上安装rdesktop来访问windows桌面,需要安装EPEL源,另外还有需要安装专门的YUM源. rpm -Uvh https://dl.fedoraproject.org/pub ...

  8. 滑块控件CCControlSlider

    #include "cocos-ext.h" //包含头文件 using namespace cocos2d::extension;//引用命名空间 /** * 创建CCContr ...

  9. 乐观锁的一种实现方式——CAS

    在java里面,synchronized关键字就是一种悲观锁,因为在加上锁之后,只有当前线程可以操作变量,其他线程只有等待. CAS操作是一种乐观锁,它假设数据不会产生冲突,而是在提交的时候再进行版本 ...

  10. linux 自启动方法

    参考文章:http://vod.sjtu.edu.cn/help/Article_Print.asp?ArticleID=626 http://hiandroidstudio.blog.51cto.c ...