yangjianfei / vue-baidu-map-3x Goto Github PK

import { createApp } from 'vue';
import BaiduMap from 'vue-baidu-map-3x';
// import BaiduMap from 'vue2-baidu-map'; vue2使用

const app = createApp(App);
app.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY',
  // v:'2.0',  // 默认使用3.0
  // type: 'WebGL' // ||API 默认API  (使用此模式 BMap=BMapGL)
});

使用

<template>
  <baidu-map class="map" :center="{lng: 118.454, lat: 32.955}" :zoom="5" @ready="ready" >
  </baidu-map>
</template>

<script setup>
const ready = ({BMap,map})=>{
  //  对地图进行自定义操作
};
</script>

<style>
/* 地图容器必须设置宽和高属性 */
.map {
  width: 400px;
  height: 300px;
}
</style>

离线地图

安装插件使用npm i vue-baidu-map-offline

全国地区编码坐标点数据集

import AreaCodePoint from 'vue-baidu-map-3x/dist/areaCodePoint.json';

// 示例：
{
  "110000": {
    "lat": 39.91101332265389,
    "lng": 116.413554023728
  }
  // 其他地区。。。
}

废弃

~~BmView~~ 废弃了BmView组件

协议

MIT 许可证

关于我

扫描添加下方的微信(yjf163163)并回复加群，即可加入”前端男海群“。交流学习，及时获取代码最新动态。

如果对你有帮助送我一颗小星星（づ￣3￣）づ╭❤～

任务清单

按需加载
treeshaking
箭头绘制，区域划分

更新日志

vue-baidu-map-3x's People

Contributors

Stargazers

Watchers

Forkers

itagan hanxiaoran906 kob01 zivyuan hx425072624 taixingyiji pengge hujun519191086 shacoshao beunhappy nauyiem 10081281 singlor1983

vue-baidu-map-3x's Issues

自动定位没有回调

<bm-geolocation anchor="BMAP_ANCHOR_ВОТТОМ_LEFT" : showAddressBar="true" :autoLocation='true" @ocationSuccess="locationSuccess" @LocationError="locationError">

这样写之后代码没有回掉

地图定位设置为BMAP_ANCHOR_TOP_RIGHT时还是在左下角显示

polygon @mouseover有时不触发事件，像是位置偏移

APP Referer校验失败。请检查该ak设置的白名单与访问所有的域名是否一致。详情查看：http://lbsyun.baidu.com/apiconsole/key#。

控制台报错

WebGL 使用 bm-polyline 后卡住不能拖拽，不能放大

getscript?type=webgl&v=1.0&ak=IDdZzXKwmNj1aHDPKa0uGuy1dhL88ZiB&services=&t=20220830143644:20 
        
       Uncaught TypeError: Cannot read properties of undefined (reading 'setMinMax')
    at bd.getBoundsIn (getscript?type=webgl&v=1.0&ak=IDdZzXKwmNj1aHDPKa0uGuy1dhL88ZiB&services=&t=20220830143644:20:114358)
    at be._initPolyOverLayBasePoint (eval at run (getscript?type=webgl&v=1.0&ak=IDdZzXKwmNj1aHDPKa0uGuy1dhL88ZiB&services=&t=20220830143644:5:122578), <anonymous>:1:183941)
    at be._syncOverlayFromMap (eval at run (getscript?type=webgl&v=1.0&ak=IDdZzXKwmNj1aHDPKa0uGuy1dhL88ZiB&services=&t=20220830143644:5:122578), <anonymous>:1:184899)
    at be._bind (eval at run (getscript?type=webgl&v=1.0&ak=IDdZzXKwmNj1aHDPKa0uGuy1dhL88ZiB&services=&t=20220830143644:5:122578), <anonymous>:1:183569)
    at be._init (eval at run (getscript?type=webgl&v=1.0&ak=IDdZzXKwmNj1aHDPKa0uGuy1dhL88ZiB&services=&t=20220830143644:5:122578), <anonymous>:1:179878)
    at new be (eval at run (getscript?type=webgl&v=1.0&ak=IDdZzXKwmNj1aHDPKa0uGuy1dhL88ZiB&services=&t=20220830143644:5:122578), <anonymous>:1:179824)
    at Array.eval (eval at run (getscript?type=webgl&v=1.0&ak=IDdZzXKwmNj1aHDPKa0uGuy1dhL88ZiB&services=&t=20220830143644:5:122578), <anonymous>:1:183)
    at g0._asyncRegister (getscript?type=webgl&v=1.0&ak=IDdZzXKwmNj1aHDPKa0uGuy1dhL88ZiB&services=&t=20220830143644:5:55351)
    at Array.<anonymous> (getscript?type=webgl&v=1.0&ak=IDdZzXKwmNj1aHDPKa0uGuy1dhL88ZiB&services=&t=20220830143644:5:35238)
    at Function.run (getscript?type=webgl&v=1.0&ak=IDdZzXKwmNj1aHDPKa0uGuy1dhL88ZiB&services=&t=20220830143644:5:122701)
getscript?type=webgl&v=1.0&ak=IDdZzXKwmNj1aHDPKa0uGuy1dhL88ZiB&services=&t=20220830143644:20 
        
       Uncaught TypeError: Cannot read properties of undefined (reading 'setMinMax')
    at bd.getBoundsIn (getscript?type=webgl&v=1.0&ak=IDdZzXKwmNj1aHDPKa0uGuy1dhL88ZiB&services=&t=20220830143644:20:114358)
    at be._initPolyOverLayBasePoint (eval at run (getscript?type=webgl&v=1.0&ak=IDdZzXKwmNj1aHDPKa0uGuy1dhL88ZiB&services=&t=20220830143644:5:122578), <anonymous>:1:183941)
    at Proxy.eval (eval at run (getscript?type=webgl&v=1.0&ak=IDdZzXKwmNj1aHDPKa0uGuy1dhL88ZiB&services=&t=20220830143644:5:122578), <anonymous>:1:180337)
    at ev.BaseClass.fire.ev.BaseClass.dispatchEvent (getscript?type=webgl&v=1.0&ak=IDdZzXKwmNj1aHDPKa0uGuy1dhL88ZiB&services=&t=20220830143644:5:2632)
    at Proxy.addOverlay (getscript?type=webgl&v=1.0&ak=IDdZzXKwmNj1aHDPKa0uGuy1dhL88ZiB&services=&t=20220830143644:5:37487)
    at Proxy.load (vue-baidu-map-3x.es.js:1423:11)
    at Proxy.ready (vue-baidu-map-3x.es.js:654:14)
    at E$1.emit (vue-baidu-map-3x.es.js:235:20)
    at Object.$emit (vue-baidu-map-3x.es.js:261:32)
    at g0.<anonymous> (vue-baidu-map-3x.es.js:510:19)

<template>
    <bm-marker :position="{lng: point.lng, lat: point.lat}" :dragging="false" lable="{{point.id}}"
        @click="marker_click(point.user_id)">
        <bm-polyline :show="show" :path="paths"></bm-polyline>
    </bm-marker>
</template>

<script setup lang="ts">
import { Point } from '../models/Point';
import { Location } from '../models/Location';
import { BmMarker, BmPolyline } from "vue-baidu-map-3x";
import { Ref } from 'vue';
import Storage from '../service/Storage'

const show = ref(false)
const paths: Ref<Location[]> = ref([])

const marker_click = async (user_id: string) => {
    if (!show.value) {
        paths.value = await Storage.user_all(user_id);
        console.log(paths.value);

        show.value = true;
    }
    else {
        show.value = false;
    }
}

defineProps<{ point: Point }>()
</script>

初始化的时候baidu-map 的属性map-type设定值报错不设定自定义的值展示正常

报错

<baidu-map class="map" :center="center" :zoom="zoom" :min-zoom="0" :max-zoom="20" :scroll-wheel-zoom="true"
    :inertial-dragging="true" mapType="'BMAP_HYBRID_MAP'" @ready="handleReady"></baidu-map>

正常

<baidu-map class="map" :center="center" :zoom="zoom" :min-zoom="0" :max-zoom="20" :scroll-wheel-zoom="true"
    :inertial-dragging="true" @ready="handleReady"></baidu-map>

请问支持uniapp吗? 使用之后agent什么的报错...

vue__WEBPACK_IMPORTED_MODULE_34__.createElementVNode) is not a function

app.js:2680 Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_34__.createElementVNode) is not a function
    at eval (vue-baidu-map-3x.es.js?de10:2973:1)
    at ./node_modules/vue-baidu-map-3x/dist/vue-baidu-map-3x.es.js (chunk-vendors.js:1352:1)
    at __webpack_require__ (app.js:2677:33)
    at fn (app.js:2945:21)
    at eval (main.js:19:75)
    at ./src/main.js (app.js:1855:1)
    at __webpack_require__ (app.js:2677:33)
    at app.js:3870:109
    at __webpack_require__.O (app.js:2726:23)
    at app.js:3871:53

https 下 net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200 (OK) 出现这个问题

3D地图的数据双向绑定会死循环卡死

我想用这个组件，搭配MapV Three进行三维地图场景的开发
MapV-three的文档
然后我在main.js中将type设置为WebGL

app.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'xxx',
  // v:'2.0',  // 默认使用3.0
  type: 'WebGL', // ||API 默认API  (使用此模式 BMap=BMapGL)
})

之后在组件中使用示例的双向数据绑定，会出现循环很多次，导致地图很慢，操作也会有些卡住失效，不像默认的type那样流畅，我debug后查看发现好像是进入循环了，好像是requestAnimationFrame的时候也触发了事件，具体因为能力有限，没有找到解决方案

<template>
  <input v-model.number="center.lng" />
  <input v-model.number="center.lat" />
  <input v-model.number="zoom" />
  <baidu-map
    class="map"
    :center="center"
    :zoom="zoom"
    @ready="ready"
    :scroll-wheel-zoom="true"
    @zoomend="syncCenterAndZoom"
    @dragend="syncCenterAndZoom"
  ></baidu-map>
</template>

<script setup>
//这里没有引入ref,nextTick是因为用了vite插件自动导入
const center = ref({
  lng: 114.298572,
  lat: 30.584355,
})

const zoom = ref(15)
const ready = ({ BMap, map }) => {
  //  对地图进行自定义操作
}
const syncCenterAndZoom = (e) => {
  //   console.log(e)
  const { lng, lat } = e.target.getCenter()
  zoom.value = e.target.getZoom()
  //   console.log(lng, lat, zoom.value)
  nextTick(() => {
    center.value.lng = lng
    center.value.lat = lat
  })
}
</script>

使用 <bm-point-collection> 海量點元素時，報 TypeError: Cannot destructure property 'BMap' of 'undefined' as it is undefined

使用海量點元素時，報 TypeError: Cannot destructure property 'BMap' of 'undefined' as it is undefined 錯誤。

使用 vue3 版本，v="3.0", type="BMap" 或 type="API" 都不行。

用不了百度路书组件么

Failed to resolve component: bml-lushu
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

坐标转换文档有问题，引入function的时候引入错误

http://map.heifahaizei.com/doc/util/#getpointstransfer-%E5%9D%90%E6%A0%87%E8%BD%AC%E6%8D%A2

关于自定义信息窗口，监听dom更新，自动重绘，感觉应该给个属性来控制是否启用

因为在使用中，我是使用的element-plus，但是使用了 el-tooltip 组件，这个组件在触发展示的时候，会在对应的dom上增加一个class，导致了窗口重绘，出现闪动。

点击行政区划没有触发点击事件

<bm-boundary @click="dblclick" @mousedown="dblclick" name="青海省" :strokeWeight="2" strokeColor="blue" :clicking="true" /> </baidu-map>

请问如何将离线地图瓦片默认请求的jpg文件改为png后缀文件

现在手上只有png瓦片地图，改了js文件中的.jpg为.png后不生效还是请求的.jpg文件

后台报错：
VM503:1 Uncaught TypeError: Cannot read properties of null (reading 'address')
at Geolocation.eval (eval at z_ (getscript?v=3.0&ak=Yp57V71dkOPiXjiN8VdcFRsVELzlVNKK&services=&t=20220816154130:1:81032), :1:778)
at c (eval at z_ (getscript?v=3.0&ak=Yp57V71dkOPiXjiN8VdcFRsVELzlVNKK&services=&t=20220816154130:1:81032), :1:1789)
at eval (eval at z_ (getscript?v=3.0&ak=Yp57V71dkOPiXjiN8VdcFRsVELzlVNKK&services=&t=20220816154130:1:81032), :1:2566)

地图Maker使用v-for加入InfoWindow时会报错

报错截图

只会出现一个点,且点击时报错

去掉infoWindow不报错,Maker使用v-for正常

使用版本 "vue-baidu-map-3x": "^1.0.21",

html

<baidu-map class="map" :center="{lng: location.lng, lat: location.lat}"
		         :zoom="15" style="height: 800px;">
	<div v-for="item in locationInfo">
		<bm-marker :position="{lng: item.location.lng, lat: item.location.lat}"
				         :dragging="false" @click="item.open = true">
			<bm-info-window :show="item.open" @close="item.open=false" @open="item.open = true">
				{{ item }}
			</bm-info-window>
		</bm-marker>
	</div>
</baidu-map>

数据结构

[
    {
        "name": "十梅庵风景区",
        "location": {
            "lat": 36.204773,
            "lng": 120.426173
        },
        "address": "山东省青岛市李沧区老虎山北麓山坡上",
        "province": "山东省",
        "city": "青岛市",
        "area": "李沧区",
        "street_id": "1020060f20f8aba71894c635",
        "telephone": null,
        "detail": 1,
        "uid": "1020060f20f8aba71894c635",
        "open": false
    },
    {
        "name": "牛毛山公园",
        "location": {
            "lat": 36.1875,
            "lng": 120.404987
        },
        "address": "安国路与文安路交叉口北150米",
        "province": "山东省",
        "city": "青岛市",
        "area": "李沧区",
        "street_id": "341c35decb82b3bfe6073835",
        "telephone": null,
        "detail": 1,
        "uid": "341c35decb82b3bfe6073835",
        "open": false
    }
]

直接导入组件创建的地图很糊不知道如何解决

类型提示问题

这个地方可不可以加上types

这样就不报错了：

否则会这样：

bm-info-window出现抖动

<bm-info-window :closeOnClick="false" :show="infoWindow.show" :position="infoWindow.info"
@close="infoWindowClose(infoWindow)" @OPEN="infoWindowOpen()" :width="400" :height="400">

车牌：{{infoWindow.name}}

车辆状态：
离线
在线
休眠

运输单位：

最后上传时间：{{parseTime(infoWindow.lasttime) }}

位置：{{infoWindow.address}}

没有司机信息

机主：{{infoWindow.owner}}

终端类型：
主设备
副设备

电话号码：{{infoWindow.phoneNumber}}

设备图片：

<el-button class="elbutton" :icon="View" @click="dianji(infoWindow)">预览

        </bm-info-window>``

tabs切换会出现页面抖动

        <bm-point-collection :points="attrs.data.fenshao" shape="BMAP_POINT_SHAPE_CIRCLE" color="blue"
            size="BMAP_POINT_SIZE_SMALL" @click="(e, r) => { click_points(e, r, 'fenshao') }"
            @mouseover="(e, r) => { over_points(e, r, 'fenshao') }"
            @mouseout="(e, r) => { out_points(e, r, 'fenshao') }">
        </bm-point-collection>
        <bm-point-collection :points="attrs.data.jianzhu" shape="BMAP_POINT_SHAPE_CIRCLE" color="yellow"
            size="BMAP_POINT_SIZE_SMALL" @click="(e, r) => { click_points(e, r, 'jianzhu') }"
            @mouseover="(e, r) => { over_points(e, r, 'jianzhu') }"
            @mouseout="(e, r) => { out_points(e, r, 'jianzhu') }">
        </bm-point-collection>
        <bm-point-collection :points="attrs.data.tianmai" shape="BMAP_POINT_SHAPE_CIRCLE" color="pink"
            size="BMAP_POINT_SIZE_SMALL" @click="(e, r) => { click_points(e, r, 'jianzhu') }"
            @mouseover="(e, r) => { over_points(e, r, 'jianzhu') }"
            @mouseout="(e, r) => { out_points(e, r, 'jianzhu') }">
        </bm-point-collection>

yangjianfei / vue-baidu-map-3x Goto Github PK

vue-baidu-map-3x's Introduction

VUE3 BAIDU MAP

baidu-map组件通过vite构建的vue3版本（支持地图v2.0、v3.0和webGl）

baidu-map组件vue2版本移步（支持地图v2.0、v3.0和webGl）

语言

文档

开始

安装

初始化

使用