vue百度地图API、获取当前经纬度以及地理位置

百度API的使用

一、创建MAP实例

var self = thiswindow.map = new BMap.Map(this.$refs.allmap); // 创建Map实例window.geoc = new BMap.Geocoder();   //地址解析对象var point = new BMap.Point(113.5545526523,22.1191948179);var marker = new BMap.Marker(point);  // 创建标注map.addOverlay(marker);map.centerAndZoom(point, 18);map.enableScrollWheelZoom();map.enableContinuousZoom();// marker.addEventListener("click",function(e){//   console.log('sss',e.point.lng, e.point.lat)// });map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});map.addControl(top_right_navigation);var styleOptions = {strokeColor:"red",    //边线颜色。fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。strokeWeight: 3,       //边线的宽度，以像素为单位。strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。strokeStyle: 'solid' //边线的样式，solid或dashed。}

二、输入框的智能搜索列表

let Ac = new BMap.Autocomplete(    //建立一个自动完成的对象{"input": suggestId, "location": "珠海"});// map.clearOverlays();
Ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件var str = "";var _value = e.fromitem.value;var value = "";if (e.fromitem.index > -1) {value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;}str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;value = "";if (e.toitem.index > -1) {_value = e.toitem.value;value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;}str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;document.getElementById("suggestId").innerHTML = str;
});var myValue;
Ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件var _value = e.item.value;myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;document.getElementById("suggestId").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;self.setPlace(myValue);               //调用方法
});

三、地址解析结果显示在地图上,并调整地图视野

setPlace(myValue) {var self = thisvar myGeo = new BMap.Geocoder();// 将地址解析结果显示在地图上,并调整地图视野myGeo.getPoint(myValue, function(point) {// console.log('tag', point)if (point) {let marker = new BMap.Marker(point);map.centerAndZoom(point, 14);map.addOverlay(marker);marker.enableDragging(); //标注可拖拽self.markListener(marker);self.clickEvent(point)} else {alert("您选择地址没有解析到结果!");}});
},

四、拖拽后获取经纬度和点击标注提示框

markListener(marker) {var self = thisvar Point= marker.getPosition();// console.log('aaa', o_Point_now)var content = "<table>";content = content + "<tr><td> 地点："+document.getElementById("suggestId").value+"</td></tr>";content = content + "<tr><td> 经度："+Point.lng+"</td></tr>";content = content + "<tr><td> 纬度："+Point.lat+"</td></tr>";content += "</table>";var infowindow = new BMap.InfoWindow(content);marker.addEventListener("click",function(){this.openInfoWindow(infowindow);});//拖拽结束事件marker.addEventListener("dragend", function(e) {//获取覆盖物位置marker.closeInfoWindow();var o_Point_now = marker.getPosition();// self.gps.lng = o_Point_now.lng;// self.gps.lat = o_Point_now.lat;self.clickEvent(o_Point_now)// console.log('ddd', self.form.gps.lng,self.form.gps.lat)});
},

五、根据经纬度来获取地址信息

clickEvent(point){var self = thisvar gc = new BMap.Geocoder();gc.getLocation(point, function (rs) {var addComp = rs.addressComponents;console.log(rs);//地址信息self.form.gps.longitude = rs.point.lng;self.form.gps.latitude = rs.point.lat;self.form.address = rs.address;self.form.street = addComp.street + addComp.streetNumber;});
},

希望能帮助你们~

哦，还有一点，有在弹出框中输入框的，一定要加

.tangram-suggestion-main {  //百度地图搜索下拉显示z-index: 999999;
}

完了~~~~~嘻嘻嘻

vue百度地图API、获取当前经纬度以及地理位置相关推荐

vue百度地图api 获取小区边界值
<div id="getMap" ></div>  this.$nextTick(function() {// 初始化百 ...
php批量获得经纬度,批量调用百度地图API获取地址经纬度坐标
1 申请密匙点击左侧 "获取密匙" ,经过填写个人信息.邮箱注册等,成功之后在开放平台上点击"创建应用",填写相关信息,在这里特别说明的是,在IP白名单框里, ...
Python 百度地图 API获取地点经纬度
from urllib import request from urllib.parse import quote import json import stringdef getLocation(a ...
c语言api获取百度地图,H5调用百度地图API获取地理位置
//获取当前位置 var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ alert ...
调用百度地图API获取经纬度(详细步骤)
前端调用百度地图API获取经纬度(详细操作) 1. 浏览器搜索百度地图开放平台 2. 创建应用点击控制台 --> 应用管理 --> 我的应用 --> 注册账号(如果没有注册过) - ...
python获取某地铁站经纬度_python通过百度地图API获取某地址的经纬度详解
前言这几天比较空闲,就接触了下百度地图的API(开发者中心链接地址:http://developer.baidu.com),发现调用还是挺方便的,本文将给大家详细的介绍关于python通过百度地图A ...
Python3 | 通过百度地图API获取商家详细信息（包括店名，地址，经纬度，电话）
一.打开百度地图开放平台,选择Web服务API . 官方文档对API接口的调用描述的比较详细,在调用之前先要申请百度地图的账号,然后申请密钥,获取密钥的步骤官方也有说明. 二.通过百度地图 ...
百度地图利用位置提供服务器,利用百度地图API获取当前位置信息的实例
利用百度地图API可以做很多事情,个人感觉最核心也是最基础的就是定位功能了.这里分享一个制作的JS可以实现登录网页后定位: var map; var gpsPoint; var baiduPoint; ...
HTML5页面调用百度地图API,获取当前位置并导航到目的地
微信也可用, <!DOCTYPE html> <html lang="zh-cmn-Hans"><meta charset="UTF-8&q ...
【百度地图】——百度地图API获取经纬度、地址及周边兴趣点
在做一个电商项目过程中,需要获取设备地理信息,包括经纬度定位,附近地址等,于是写了一个工具类方便使用. 1.在使用百度地图API使,首先要获取官方授权,在http://lbsyun.baidu.com ...

vue百度地图API、获取当前经纬度以及地理位置

百度API的使用

vue百度地图API、获取当前经纬度以及地理位置相关推荐

最新文章

热门文章