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{
width: 400px;
height: 400px;
font-family: "微软雅黑";
border:1px solid green;
}
</style>
vue中使用百度地图,悬浮窗搜索功能的更多相关文章
- Vue中使用百度地图——设置地图标注
知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...
- Vue中使用百度地图——根据输入框输入的内容,获取详细地址
知识点:在Vue.js项目中调用百度地图API,实现input框,输入地址,在百度地图上定位到准确地址,获得到经纬度 参考博客: 百度地图的引用,初步了解参考博客:http://blog.csdn. ...
- vue中实现百度地图
1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...
- Vue --》 如何在vue中调用百度地图
1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...
- vue中引入百度地图
xxx.vue <template> <div> <el-input v-model="inputaddr"> </el-input> ...
- vue 中结合百度地图获取当前城市
首先需要去百度地图开发者平台申请 ak http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5 在index.html 中引入script ...
- vue中使用百度地图vue-baidu-map
安装 npm install vue-baidu-map --save 全局注册 全局注册将一次性引入百度地图组件库的所有组件.需在入口文件main.js中引入vue-baidu-map import ...
- VUE 中引入百度地图(vue-Baidu-Map)
1.安装 $ npm install vue-baidu-map --save 2.全局注册,在main.js中引入以下代码 import BaiduMap from 'vue-baidu-map' ...
- vue 中引用 百度地图
1.在 http://lbsyun.baidu.com/ 申请 秘钥 2.在index.html文件中引入 <script src="http://api.map.baidu.com/ ...
随机推荐
- 【EXCEL-折线图】百折不挠 | 用EXCEL画出与众不同的折线图(曲线图)
很多熟悉EXLCE的朋友都知道EXCEL在生成统计图表方面的强大功能,我们在写各类总结.报告.方案等文档时常涉及到各类统计数字,将统计数字用图表的形式展示出来,既直观又美观.下面我分享一种不一样的折线 ...
- WPF自定义控件创建
WPF自定义控件创建 本文简单的介绍一下WPF自定义控件的开发. 首先,我们打开VisualStudio创建一个WPF自定义控件库,如下图: 然后,我们可以看到创建的解决方案如下: 在解决方案中,我们 ...
- WAF开放规则定义权:专家策略+用户自定义策略=Web安全
在第一期“漫说安全”栏目中,我们用四格漫画的形式介绍了基于深度学习的阿里云WAF到底智能在哪里,能帮客户解决什么问题. 在今天的这期栏目里,我们依然通过漫画这种通俗易懂的方式,与大家分享阿里云WAF的 ...
- Android版数据结构与算法(八):二叉排序树
本文目录 前两篇文章我们学习了一些树的基本概念以及常用操作,本篇我们了解一下二叉树的一种特殊形式:二叉排序树(Binary Sort Tree),又称二叉查找树(Binary Search Tree) ...
- github常见操作和常见错误!错误提示:fatal: remote origin already exist
如果输入$ git remote add origin git@github.com:djqiang(github帐号名)/gitdemo(项目名).git 提示出错信息:fatal: remote ...
- T-SQL语法基础
一.T-SQL语言的分类 DDL-数据定义语言 create-创建 alter-修改 drop-删除(针对对象) DML-数据操作语言 Insert-插入 update-更新 delete-删除(针对 ...
- 【转载】 Sqlserver中查看自定义函数被哪些对象引用
Sqlserver数据库中支持自定义函数,包含表值函数和标量值函数,表值函数一般返回多个数据行即数据集,而标量值函数一般返回一个值,在数据库的存储过程中可调用自定义函数,也可在该自定义函数中调用另一个 ...
- Exchange-重建见证服务器和目录
问题描述: 在升级Exchange 2013 CU22检查群集节点状态的过程中发现群集组处于失败状态,具体报错信息如下:警告:数据库可用性组"***"见证处于失败状态.数据库可用性 ...
- windows下gitbash安装教程
下载安装 1.从git官网下载一个git安装包,官网下载地址http://www.git-scm.com/download/ 2.双击安装程序,进入欢迎界面点击[Next >] 3.阅读协议,点 ...
- Markdown工具Atom及基本语法
下载使用 访问atom.io下载Atom 这里下载的是1.33.1版本 好用的插件包 点击File->Settings->Packages,可以安装指定的插件包. markdown-img ...