Vue引入百度地图API，添加点击地图拾取坐标并且标记和地址搜索功能

参考官方文档

html页面

<template><el-form><el-row :gutter="24"><el-col :span="12"><el-col :span="12"><el-form-item label="位置经度" prop="lng"><el-inputv-model="model.lng"type="number"class="input_number"@mousewheel.native.prevent/></el-form-item></el-col><el-col :span="12"><el-form-item label="位置维度" prop="lat"><el-inputv-model="model.lat"type="number"class="input_number"@mousewheel.native.prevent/></el-form-item></el-col><el-col :span="24"><baidu-mapclass="bm-view"ak="QFgFQorrB84maOZh0pPGC8kUiP0mGIhx":center="center":zoom="zoom":scroll-wheel-zoom="true"@ready="createMap"><!--            搜索--><bm-local-search :keyword="model.address" :auto-viewport="true"style="display: none"></bm-local-search><!--            标记--><bm-marker :position="{lng: model.lng, lat: model.lat}"/></baidu-map><el-input v-model="model.address" placeholder="搜索地点"style="margin-left: 10px;width: 200px;position: absolute;top: 25%;opacity: 0.9"prefix-icon="el-icon-search"></el-input></el-col></el-col></el-row></el-form>
</template>

方法

<script>import BaiduMap from 'vue-baidu-map/components/map/Map.vue'export default {components: {BaiduMap,BmLocalSearch},data () {return {center: {lng: 0, lat: 0},zoom: 10,model: {lng: '',lat: '',address: ''}}},methods: {createMap ({BMap, map}) {// 百度地图API功能this.center.lng = 117.2this.center.lat = 34.26this.zoom = this.zoomconst viewthis = thismap.addEventListener('click', function (e) {viewthis.model.lng = e.point.lngviewthis.model.lat = e.point.lat})// 区域图var datas = new Array('徐州市-#665599')var bdary = new BMap.Boundary()for (var i = 0; i < datas.length; i++) {getBoundary(datas[i], bdary)}// 设置区域图function getBoundary (data, bdary) {data = data.split('-')bdary.get(data[0], function (rs) {// 获取行政区域var count = rs.boundaries.length // 行政区域的点有多少个// var pointArray = []for (var i = 0; i < count; i++) {var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2,strokeColor: '#ff0000',fillOpacity: 0.1,fillColor: data[1]}) // 建立多边形覆盖物map.addOverlay(ply) // 添加覆盖物}})}}}}
</script>

样式

<style scoped>.bm-view {width: 100%;height: 300px;}
</style>

效果图
点击拾取坐标
地址搜索

Vue引入百度地图API，添加点击地图拾取坐标并且标记和地址搜索功能相关推荐

vue调用百度地图API实现点击相应位置切换地图定位
vue调用百度地图API实现点击相应位置切换地图定位 1.需求分析在页面显示地图,初始状态显示上海市,地图上有特定地点的标注. 左侧为建筑(地点)列表,点击某个地点右侧地图定位到其地理位置并显示具体 ...
echarts引入百度地图并且添加点击事件
echarts引入百度地图并且添加点击事件 (1)下载依赖项 npm install echarts --save (2)引入echarts到页面当中 import * as echarts from ...
vue引入百度地图BMapGL，获取天地图根据名称显示坐标定位信息
1. 解决提示:解决调用百度地图API弹出提示 "百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度LBS开放平台密钥"的方法百度官网生成ak: https://lb ...
html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
解决Vue引入百度地图JSSDK：BMap is undefined 问题
原文链接:解决Vue引入百度地图JSSDK:BMap is undefined 问题百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入异步加载但vue项目中仅某一两个 ...
高德地图 API，点击地图标记获取自定义标记 (Marker) 中的信息
高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息通过高德地图 JS Web 添加自定义图标,自定义窗口标记已经能在地图中正常添加自定义标记了这篇文章讲讲点击标记时,如何 ...
高德地图API 添加标点自定义标点
高德地图API 添加标点自定义标点在我们创建完地图实例后,就可以在地图中添加遮盖物,覆盖物有多种类型,今天只说点标记首先构造一个点标记添加默认样式点标记 // 构造点标记 var marker ...
从百度地图api到我的地图app
从百度地图api到我的地图app 1.了解百度地图api 获取AK(秘钥/百度地图api) 注册和获取秘钥中会遇到的问题: 在android studio上配置百度地图SDK [开发文档链接](htt ...
【高德地图API】如何进行坐标转换？坐标拾取工具
2019独角兽企业重金招聘Python工程师标准>>> 一.坐标体系首先我们要明白,开发者能接触到哪些坐标体系呢? 第一种分类: 1. GPS,WGS-84,原始坐标体系.一般用 ...
vue引入百度地图使用地图的JavaScript API GL 实现在地图上标注点位
本文章针对于不会看文档的小白.刚毕业参加工作的前端朋友们. 1.首先要引入百度地图具体流程上个文章有. 2.根据官网的demo引入 (官网的不太详细,可以根据自己需求引入)我这里就展示一部分代码. ...

Vue引入百度地图API，添加点击地图拾取坐标并且标记和地址搜索功能

Vue引入百度地图API，添加点击地图拾取坐标并且标记和地址搜索功能相关推荐

最新文章

热门文章