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>

vue中使用百度地图,悬浮窗搜索功能的更多相关文章

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

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

  2. Vue中使用百度地图——根据输入框输入的内容,获取详细地址

    知识点:在Vue.js项目中调用百度地图API,实现input框,输入地址,在百度地图上定位到准确地址,获得到经纬度 参考博客:  百度地图的引用,初步了解参考博客:http://blog.csdn. ...

  3. vue中实现百度地图

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

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

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

  5. vue中引入百度地图

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

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

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

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

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

  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. captcha.js一个生成验证码的插件,使用js和canvas生成

    一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...

  2. SQL优化指南

    慢查询日志 开启撒网模式 开启了MySQL慢查询日志之后,MySQL会自动将执行时间超过指定秒数的SQL统统记录下来,这对于搜罗线上慢SQL有很大的帮助. SHOW VARIABLES LIKE 's ...

  3. JavaScript构造函数

    JavaScript不同于其他强类型语言,没有类的概念,但是它支持可以与实例共同使用特殊的Constructor构造器,使用new关键字创建新的实例,并告知JavaScript使用对象的内规则去定制这 ...

  4. PageHelper分页异常(java.base/java.util.ArrayList cannot be cast to com.github.pagehelper.Page)

    在SqlMapConfig.xml里面配置分页插件 applicationContext-service.xml里面的配置,我出现问题谁因为,在salSessionFactory里没注入全局配置文件

  5. 骁龙735处理器细节曝光:7nm工艺加持,支持5G

    骁龙700系列是高通公司的中高端芯片组系列,该系列包括10nm骁龙710和骁龙712 SoC:以及8nm骁龙730和骁龙730G SoC.最新消息显示,高通公司正在开发一款新的7nm芯片组,将被称为骁 ...

  6. Ubuntu 18.04编译AOSP源码

    总结一下我从Ubuntu 18.04下编译成功AOSP的过程,以及遇到的坑 我的电脑配置: OS: Ubuntu 18.04 bionic Kernel: x86_64 Linux 4.18.0-17 ...

  7. Android中对已安装应用的管理实现

    获取.管理手机中已安装的所有应用信息 1.创建应用的实体类AppInfo,属性有应用的名称.包名.图标.第一次安装时间和版本名称 public class AppInfo { private Stri ...

  8. SQL Server的Descending Indexes

    SQL Server的Descending Indexes 测试环境:SQL Server 2012 表结构如下 USE [test] GO CREATE TABLE [dbo].[tt8]( ,) ...

  9. Pycharm配置Git和Github

    安装Git(安装过程略) 注册Github(注册过程略) Pycharm配置 Github配置 进入Pycharm后点File——Settings,进入设置页面,依次展开Version Control ...

  10. Unicode 与 utf8 utf16 utf32的关系

    Unicode是计算机领域的一项行业标准,它对世界上绝大部分的文字的进行整理和统一编码,Unicode的编码空间可以划分为17个平面(plane),每个平面包含2的16次方(65536)个码位.17个 ...