vue h5地图选点

效果图：

实现代码

loadBMap.js内容

/*** 动态加载百度地图api函数* @param {String} ak  百度地图AK，必传*/
export default function loadBMap(ak) {return new Promise(function (resolve, reject) {if (typeof window.BMap !== "undefined") {resolve(window.BMap);return true;}window.onBMapCallback = function () {resolve(window.BMap);};let script = document.createElement("script");script.type = "text/javascript";script.src ="http://api.map.baidu.com/api?v=2.0&ak=" +ak +"&callback=onBMapCallback";script.onerror = reject;document.head.appendChild(script);});
}

mapSelect.vue内容

注意替换自己的key

<template><div class="map-page"><div class="page-top"><img class="map-img" src="../assets/map-icon.png" alt="" /><div id="container" style="width: 100%; height: 300px"></div></div><div class="page-bottom"><div class="search-box"><input type="text" v-model="keyWord" @input="handleSearch" /></div><div class="poi-box"><divclass="poi-item"v-for="(item, index) in surroundingPois":key="index"@click="handleSelect(item)">{{ item.title }}<div class="address">{{ item.address }}</div></div></div></div></div>
</template>
<script>
var BMap = "";
import loadBMap from "@/utils/loadBMap";
export default {data() {return {map: "", //地图实例surroundingPois: [], //周边点keyWord: "", //关键词city: "", //当前定位城市mPoint: "", //实例};},async mounted() {//注意替换keyBMap = await loadBMap("自己在百度开放平台申请的key");this.initMap();},methods: {initMap() {let that = this;this.geolocation();this.map = new BMap.Map("container", { enableMapClick: false }); //新建地图实例，enableMapClick:false ：禁用地图默认点击弹框this.mPoint = new BMap.Point(113.30765, 23.12005);this.map.centerAndZoom(this.mPoint, 16);this.map.addEventListener("click", function (e) {//给地图绑定点击事件that.getAddrByPoint(e.point); //点击后调用逆地址解析函数});this.map.addEventListener("dragend", function () {//给地图绑定点击事件that.getAddrByPoint(that.map.getCenter()); //点击后调用逆地址解析函数});},/*** 逆地址解析函数（根据坐标点获取详细地址）* @param {Object} point   百度地图坐标点，必传*/getAddrByPoint(point) {let that = this;let geco = new BMap.Geocoder();geco.getLocation(point, function (res) {console.log(res); //内容见下图that.map.panTo(point, 1); //将地图的中心点更改为给定的点that.surroundingPois = res.surroundingPois;});},/*** 地址解析搜索*/getPoint() {let that = this;let myGeo = new BMap.Geocoder();myGeo.getPoint(this.keyWord,function (point) {if (point) {console.log("point", point);that.getAddrByPoint(point); //点击后调用逆地址解析函数}},this.city);},/*** 浏览器定位函数*/geolocation() {let that = this;let geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function (res) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {that.city = res.address.city;that.getAddrByPoint(res.point); //当成功时，调用逆地址解析函数} else {alert("failed" + this.getStatus()); //失败时，弹出失败状态码}},{ enableHighAccuracy: true }); //enableHighAccuracy：是否要求浏览器获取最佳效果，默认为false},//选择的位置handleSelect(item) {console.log(item, "item");alert(item.title);},handleSearch() {//this.getPoint(); //地址解析搜索this.tipSearch(); //提示搜索},/*** 提示搜索*/tipSearch() {let that = this;let local = new BMap.LocalSearch(this.map, {//智能搜索onSearchComplete: function (res) {console.log(res, "搜索结果");if (res?.Kr?.length) {that.surroundingPois = res.Kr;}},});local.search(this.keyWord, this.mPoint, 1000);},},
};
</script><style lang="scss" scoped>
.page-top {position: relative;.map-img {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 999999999999;}
}
.page-bottom {margin-top: 20px;.search-box {input {width: 100%;}}.poi-box {.poi-item {text-align: left;.address {font-size: 13px;color: #ccc;}}}
}
</style>

vue h5地图选点相关推荐

vue h5 腾讯地图路线规划
vue h5腾讯地图定位传送门代码如下:在微信浏览器中会弹出是否打开第三方点击取消则打开内置腾讯点击去则跳转腾讯地图app location.href = https://apis.map.q ...
vue/js如何精准获取用户当前地理位置，精准获取经纬度、精准地图选点，Android定位偏移问题解决
前言: 当时h5页面使用腾讯地图.百度地图.高德地图等获取用户当前地理位置坐标,均有偏移,偏移好几公里,无法获取精准经纬度.最后调用了微信jssdk的方法,才获取了精准的经纬度. 二.具体步骤 1.调 ...
Ant design Of Vue vue-amap 高德地图选点组件
参考链接: Vue(vue-amap) 接入高德地图获取坐标与地址信息 'AMapUI' is not defined 异常的话按照这个处理,没有异常就可以不用看 tips1: 本组件直接将main ...
vue使用谷歌地图绘制图形以及地图选点功能
因做加拿大配送项目得用到谷歌地图效果图: 第一步: 首先访问谷歌地图以及文档需要加速插件你得在谷歌浏览器扩展程序里添加一个加速插件(如图): 最好充值vip,不然免费的加速通道不稳定本人是在vu ...
uni-app开发小程序-引用腾讯地图选点
官方入口文档入口:https://lbs.qq.com/miniProgram/plugin/pluginGuide/subway 以下概述: 1.插件申请接入: 在腾讯公众平台中, "微信 ...
vue2百度地图选点组件
vue2百度地图选点组件代码块 loadMap.js 组件markerMap.vue 使用代码块 loadMap.js /*** 动态加载百度地图api函数* @param {String} ak ...
android h5 禁止缩放,vue h5移动端禁止缩放代码
vue h5移动端禁止缩放代码安卓在index.html里面写 ios 在APP.vue里面写 window.onload = function() { document.addEventList ...
android access 腾讯地图,Android 腾讯地图选点定位，仿微信发送位置
效果图: 不需要集成定位.地图,然后标记回调等繁琐的操作,你只需要一个webview,使用腾讯地图的地图选点组件即可. 申请key 接入指引使用地图选点组件调用方式一: 通过iframe内嵌调用 ...
uni-app中使用腾讯位置服务实现小程序地图选点功能
文章目录 1. 官方文档 2. 小程序添加插件 3. HBuilder配置 4. 配置代码 5. 页面代码 1. 官方文档技术选定(地图选点插件) (对应官网:https://lbs.qq.com/ ...

vue h5地图选点

vue h5地图选点相关推荐

最新文章

热门文章