百度地图的地图选点组件

一、介绍

地图选点指的是可在地图上搜索指定位置，获取到经纬度，或者通过点击地图上的某个位置，获取到详细的中文地址和经纬度。腾讯地图和高德地图都有官方的已封装好的组件可直接调用，但百度地图我研究了下，安卓和ios移动端系统是有封装好的组件，但web端的要自己通过各种api方式来实现，所以在网上大概找了一个封装比较简单全面的。

二、代码

1、需要注册百度地图账号，然后在控制台生成应用，获取到密钥ak，然后在public——index.html页面引入地图

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>

2、在components下创建一个Baidu-map.js组件

<template><el-dialog title="位置选择" :visible.sync="openMap" width="900px" append-to-body><el-form label-width="80px"><el-row><el-col :span="10"><el-form-item label="搜索地址"><el-input size="mini" type="text" id="searchAddres" v-model="searchAddresKeywords"placeholder="请输入地点"></el-input></el-form-item></el-col><el-col :span="14"><el-form-item label="当前地址"><el-input placeholder="请输入内容" v-model="addressInfo.address"><templateslot="prepend">{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}</template></el-input></el-form-item></el-col></el-row></el-form><div id="baidu-map-container" style="width: 100%; height: 400px;"></div><div slot="footer" class="dialog-footer"><el-button type="primary" @click="confirmSelect">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog>
</template><script>export default {data() {return {searchAddresKeywords: "",addressInfo: {// 地址信息longitude: "", // 经度latitude: "", // 纬度province: "", // 省city: "", // 市district: "", // 区address: "", // 详细地址},openMap: false,};},methods: {// 初始化百度地图initBaiduMap() {let that = this;this.$nextTick(function () {/** 初始化地图Start */var map = new BMapGL.Map("baidu-map-container"); // 创建地图实例var point = new BMapGL.Point(116.404, 39.915); // 设置中心点坐标map.centerAndZoom(point, 13); // 地图初始化，同时设置地图展示级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放/** 初始化地图End *//** 点击地图创建坐标事件Start */// 添加地图点击事件map.addEventListener("click", function (e) {var clickpt = e.latlng; // 点击的坐标map.clearOverlays(); // 移除地图上的标注var marker = new BMapGL.Marker(clickpt); // 创建标注map.addOverlay(marker); // 将标注添加到地图中// 逆地址解析that.geocAddress(clickpt);});/** 点击地图创建坐标事件End *//** 搜索地址Start */// 建立一个自动完成的对象var ac = new BMapGL.Autocomplete({input: "searchAddres",location: map,});// 鼠标点击下拉列表后的事件ac.addEventListener("onconfirm", function (e) {map.clearOverlays(); // 移除地图上的标注var local = new BMapGL.LocalSearch(map, {//智能搜索onSearchComplete: function (results) {let poi = results.getPoi(0); //获取第一个智能搜索的结果var searchpt = poi.point; // 获取坐标map.centerAndZoom(searchpt, 16);map.addOverlay(new BMapGL.Marker(searchpt)); //添加标注that.geocAddress(searchpt); // 逆地址解析},});// 搜索词var searchValue = e.item.value;local.search(searchValue.province +searchValue.city +searchValue.district +searchValue.street +searchValue.business);});/** 搜索地址End */});},/** 逆向解析地址 point */geocAddress(point) {let that = this;var geoc = new BMapGL.Geocoder();geoc.getLocation(point, function (geocInfo) {// 设置基本信息var addressInfo = geocInfo.addressComponents;that.addressInfo.longitude = point.lng;that.addressInfo.latitude = point.lat;that.addressInfo.province = addressInfo.province;that.addressInfo.city = addressInfo.city;that.addressInfo.district = addressInfo.district;let address = addressInfo.street + addressInfo.streetNumber;if (geocInfo.surroundingPois.length > 0) {address = address + geocInfo.surroundingPois[0].title;}that.addressInfo.address = address;});},/** 打开地图选择 */show() {this.openMap = true;this.initBaiduMap();},/*** 确认选择*/confirmSelect() {this.$emit("confirmMapAddress", this.addressInfo);this.openMap = false;},/*** 取消选择*/cancel() {this.openMap = false;}},};</script><style lang="scss">// 防止地图自动完成的对象被遮挡.tangram-suggestion {z-index: 9999;}</style>

3、在需要调用的页面引入组件

<baidu-map ref="bmapAddressSelect" @confirmMapAddress="confirmMapAddress"></baidu-map>

/** 显示地图 */
showMap() {this.$refs.bmapAddressSelect.show()
},/** 确认地图地址 */
confirmMapAddress(addressInfo) {console.log(addressInfo) // 获取到选点的地址和经纬度
}

4、总结

组件按步骤一步一步引入即可直接使用，但我这里使用的是new BMapGL，如果你的版本是3.0的话，搜索还可以正常使用，但是选点就会有问题，需要改一下组件Baidu-map.js的这一段代码

map.addEventListener("click", function (e) {var clickpt = e.latlng; // 点击的坐标map.clearOverlays(); // 移除地图上的标注var marker = new BMapGL.Marker(clickpt); // 创建标注map.addOverlay(marker); // 将标注添加到地图中// 逆地址解析that.geocAddress(clickpt);
});

将e.latlng更改成e.point即可正常使用！

如果有讲错的地方，欢迎指出，大家一起交流学习！

地图选点（百度地图web端）相关推荐

web页面调起地图APP(高德地图、百度地图、腾讯地图)
web页面调起地图APP(高德地图.百度地图.腾讯地图) 在没有安装APP的情况下可以用web端地图以路线规划为例: 一.腾讯地图 web端官方文档地址:https://lbs.qq.com/we ...
JQ----移动端h5页面通过地址调起通讯录以及高德地图、百度地图定位导航
JQ----移动端h5页面通过地址调起通讯录以及高德地图.百度地图定位导航通讯录: 可先加meta标签 <a href="tel:13838383838" class=&q ...
移动端h5页面通过地址调起高德地图、百度地图定位导航
以下是通过点击a标签进行地图的调起的高德: <a href="https://uri.amap.com/marker?position=经度,纬度&name=所在的位置名称& ...
android百度地图箭头,百度地图API绘制带头箭头的折线
源代码: body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} #l-map{height:100%;wid ...
高德h5地图api接口_html5通过腾讯地图、高德地图、百度地图开发api接口获取坐标对应的周边信息...
在通过 geolocation 获取到当前的 GPS 坐标后,需要通过"逆地理位置解析"才能得到街道对应的街道.建筑物.周边等相关信息. 下面我使用国内的三家主要的地图厂商(腾讯地 ...
通过腾讯地图、高德地图、百度地图开发接口获取坐标对应的周边相关信息
通过腾讯地图.高德地图.百度地图开发接口获取坐标对应的周边相关信息更新: 以前出于好意暴露了个人的KEY,现已被烂用.为不影响您的业务,请使用我的KEY的朋友去申请自己的KEY,我的KEY将在不久后 ...
H5唤醒本地APP（谷歌地图、百度地图等相通）
说一下兼容性问题: IOS:safari浏览器,google浏览器,UC浏览器可用QQ浏览器无法使用,其他的没测. Android:只有google浏览器可以打开谷歌地图,百度地图没测试. 首先:判断 ...
H5唤醒本地APP（谷歌地图、百度地图等相通）传递数据
前一段时间做了一个架设在微信上的打车软件,司机端是在浏览器中打开,网页上的导航无法实时定位与语音播报,后因甲方强制要求,必须打开本地谷歌地图,并传入用户的起点终点,于是翻译了相关博客,完美解决,亲测可 ...
Android百度地图(一):百度地图定位sdk 类方法参数、定位原理详细介绍
***转载.引用请标明出处*** http://www.jianshu.com/p/29ccac3e1e42 本文出自[zhh_happig的简书博客](http://www.jianshu.com/ ...
Android中级篇之百度地图SDK v3.5.0-基础地图[图解百度地图基础教程]
基础地图[比官方更详细] 简介开发者可利用SDK提供的接口,使用百度为您提供的基础地图数据.目前百度地图SDK所提供的地图等级为3-19级,所包含的信息有建筑物.道路.河流.学校.公园等内容.所有叠 ...

地图选点（百度地图web端）