dafrok / vue-baidu-map Goto Github PK

View Code? Open in Web Editor NEW

2.4K 60.0 433.0 5.73 MB

Baidu Map components for Vue 2.x

Home Page: https://dafrok.github.io/vue-baidu-map/

License: MIT License

JavaScript 22.89% Vue 77.11%

baidu baidumap map vue vue-baidu-map

vue-baidu-map's Introduction

VUE BAIDU MAP

Baidu Map components for Vue 2.x

Languages

Documentation

https://dafrok.github.io/vue-baidu-map

Get Start

Installation

npm i --save vue-baidu-map

Initialization

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
  ak: 'YOUR_APP_KEY'
})

Usage

<template>
  <baidu-map class="map">
  </baidu-map>
</template>

<style>
/* The container of BaiduMap must be set width & height. */
.map {
  width: 100%;
  height: 300px;
}
</style>

Contributing

Contributing Guide

License

MIT License

vue-baidu-map's People

Contributors

Stargazers

Watchers

Forkers

jiabinxu github-ronald xuanjiuzhang waipy githubzwj green0511 saltfish-x rookiedj signhuwei forleve richman1988 problemking coolfishstudio qingbinguo bingblog wilfredo-ho yangchunjian jasminehua hunnad basestart shencyber jackfinal flymianmian xiaoweidotnet wk1025 iq9891 gyjsuccess wztboyking limmy-zh 515560229 moment3784 wangluoworld olivervin kaenry btcltc chen-jiajian front-end-john raintao creedbox jeromehan spacetimeplus freshmanjay lzldemo xibeiwind celleychen yryu 1650440357ppb javafx2010 zhj-040352 jstf9673 yusidi jagger168 onewater side9527 trendingtechnology panpanobba weiqiang19880124 shenhailong seawenzhu liderj hwen ifa6 fengzhiquxiang xzs333 windform cchenggit jerryhu570 guozhenchang urienzhang waullen linecode zouyaoji kdush mcdongwang l-chris brahmachen lpbzzz xierenyuan gzhaipu w-yz kathydong1 xanja fengzhishang20 jackeasons holovesalt liwenda122 liehuoren laveyd leo-sh li3007liuu wsh0521 kennylisc cugbmao qipg airbreak jsonzhang0215 coober-ding zooeyking tisinternet ofroad

vue-baidu-map's Issues

有一个功能用上vue-baidu-map 不知道如何实现

想实现这样一个需求
在BMap加载之后获取用户位置用户授权后根据坐标搜周边超市

本想用MapControlGeolocation在加载后自动获取发现并不会用这个组件似乎不能通过 enableAutoLocation来自动定位...不知道如何在他自动定位后把相应的值赋给用户的坐标值

后来我用navigator.geolocation.getCurrentPosition来进行获取位置但是再IOS10上无法正常显示...

想问如何实现和用好控件

安装此插件时，警告：npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fseve
[email protected]，使用时也总说BMap未定义，是因为此组件不支持window系统吗

Vue2 中引用地图插件报错额。

拖动覆盖物dragend 回调不到数据

  <el-form-item label="地图">
            <baidu-map class="map" :center="{lng: lng, lat:lat}" :zoom="16" @ready="loadMap">
                <bm-view style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px"></bm-view>
                <bm-marker :point="{lng:lng, lat:lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" :label="{content: data.name, opts: {offset: {width: 20, height: -10}}}" @dragend="dragend"></bm-marker>
                <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" />
                <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT" />
            </baidu-map>
        </el-form-item>

 methods: {
            searchMap: function() {

            },
            loadMap: function() {
                var map = this.data.location.split(',');
                this.lat = map[0];
                this.lng = map[1];
            },
             dragend: function(type, target, pixel, point) {
              console.log(type+"----"+target+"----"+pixel+"----"+point);
            }

        },

vue-router进行$router.push切换时，MapOverlayMarker只在第一次加载生效。

后续进行来回切换就不会出现覆盖物了。

显示隐藏地图时，中心点的问题

当我初始化一个display:none的地图时，当我点击显示的时候，可视区域中心点并没有在指定的坐标位置上。通过:center初始化的。并且当我通过@ready方法拿到BMap的核心类和地图实例，也不能通过这个来调用panTo(new BMap.point())方法来移动中心点。
请问下应该怎么做呢？

bm-local-search 搜索拿到的位置是整个城市的了。

<bm-local-search :keyword="search" :location="center" :nearby="nearby" @searchcomplete="searchcomplete"></bm-local-search>

center是深圳北的{lat,lng}
nearby:{center:center, radius:200}
searchcomplete 这个拿到的数据是龙岗，罗湖等的数据了。
组件内的load的_location值是深圳北的位置。

运行错误

`ERROR in ENOENT: no such file or directory, scandir 'C:\Users\Administrator\Documents\GitHub\vue-baidu-map\node_modules\.4.5.0@node-sass\vendor'
 @ ./~/.2.0.3@vue-style-loader!./~/.0.26.4@css-loader!./~/.10.3.0@vue-loader/lib/style-rewriter.js?id=data-v-d29e0346!./~/.4.1.1@sass-loader!./~/.10.3.0@vue-loader/lib/selector.js?type=styles&index=0!./docs/src/components/App.vue 4:14-295 13:3-17:5 14:22-303

ERROR in ENOENT: no such file or directory, scandir 'C:\Users\Administrator\Documents\GitHub\vue-baidu-map\node_modules\.4.5.0@node-sass\vendor'
 @ ./~/.2.0.3@vue-style-loader!./~/.0.26.4@css-loader!./~/.10.3.0@vue-loader/lib/style-rewriter.js?id=data-v-0bf43138&scoped=true!./~/.4.1.1@sass-loader!./~/.10.3.0@vue-loader/lib/selector.js?type=styles&index=0!./docs/src/components/DocPreview.vue 4:14-314 13:3-17:5 14:22-322

ERROR in ENOENT: no such file or directory, scandir 'C:\Users\Administrator\Documents\GitHub\vue-baidu-map\node_modules\.4.5.0@node-sass\vendor'
 @ ./~/.2.0.3@vue-style-loader!./~/.0.26.4@css-loader!./~/.10.3.0@vue-loader/lib/style-rewriter.js?id=data-v-66e4f9e7&scoped=true!./~/.4.1.1@sass-loader!./~/.10.3.0@vue-loader/lib/selector.js?type=styles&index=0!./docs/src/components/RootFrame.vue 4:14-313 13:3-17:5 14:22-321

ERROR in ENOENT: no such file or directory, scandir 'C:\Users\Administrator\Documents\GitHub\vue-baidu-map\node_modules\.4.5.0@node-sass\vendor'
 @ ./~/.2.0.3@vue-style-loader!./~/.0.26.4@css-loader!./~/.10.3.0@vue-loader/lib/style-rewriter.js?id=data-v-0342d071!./~/.4.1.1@sass-loader!./~/.10.3.0@vue-loader/lib/selector.js?type=styles&index=0!./~/.0.6.2@vue-markdown-loader/_cache/bm-local-search-22.vue 4:14-246 13:3-17:5 14:22-254
Child html-webpack-plugin for "index.html":`

请问这些错误如何处理？

使用vue-baidu-map 之后获取map对象报错，应该怎么使用呢

在vue-baidu-map里如何使用new BMap.Geocoder();

这个库，有这集成这个吗？

marker 标签的 icon 可以替换么

marker icon 如何配置，应该传入一个 BMap.Icon, 只传配置参数进去，无法实现icon。

请问通过已有的坐标来获取当前坐标所在的地区（精确到乡镇），有方法实现吗？

如题！！麻烦开发了！

android 4.4.4 以下 webview 有错误

@Dafrok

我抓了一下 webview 的log。没有报错。

就出现了这些。
不是安卓的浏览器哦，是安卓的 webview

如何以百度自带API调用方法不会影响到组件化定义的方法

<template>
        <baidu-map class="bm-view" id="allmap" :center="center" :zoom="zoom" @ready="mapHandler">
          <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"/>
        </baidu-map>
</template>

var map = new BMap.Map("allmap");  
var startIcon = new BMap.Icon("static/marker_starting.png", new BMap.Size(50, 50), {
      imageSize: new BMap.Size(50,50),
      imageOffset: new BMap.Size(0, 0)
});
var startPoint = new BMap.Marker(new BMap.Point(113.94199, 22.529346),{icon:startIcon});
map.addOverlay(startPoint);

这样调用就把组件化定义的方法覆盖了，该如何调用百度自带API呢？

读源码，不知_initBaiduMap回调，是何在处理？

读源码时，不知道作者如何在vue文件里注册全局的_initBaiduMap，以便百度sdk的callback访问，作者可否指点一下。

    getMapScript () {
      if (!global.BMap) {
        const ak = this._BMap().ak
        global.BMap = {}
        global.BMap._preloader = new Promise((resolve, reject) => {
          global._initBaiduMap = function () {
            resolve(global.BMap)
            global.document.body.removeChild($script)
            global.BMap._preloader = null
            global._initBaiduMap = null
          }
          const $script = document.createElement('script')
          global.document.body.appendChild($script)
          $script.src = `//api.map.baidu.com/api?v=2.0&ak=${ak}&callback=_initBaiduMap`;
        })
        return global.BMap._preloader
      } else if (!global.BMap._preloader) {
        return Promise.resolve(global.BMap)
      } else {
        return global.BMap._preloader
      }
    }

另外，global.BMap当中global对象，是如何在使用？
谢了！

使用匿名对象绑定 prop 造成生命周期混乱的问题

代码

<template>
	<baidu-map v-bind:style="{
		width: '100%',
		height: mapHeight + 'px'
	}" 
		:center="{lng: 116.404, lat: 39.915}" 
		:zoom="15" 
		:scroll-wheel-zoom="true" 
		@ready="ready">
		
		<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT" />
		<bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT" />
		<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT" />
	</baidu-map>
</template>

报错如下

TypeError: Cannot read property 'MapTypeControl' of undefined
    at VueComponent.addControl (eval at <anonymous> (app.js:981), <anonymous>:1:9263)
    at VueComponent.boundFn [as addControl] (eval at <anonymous> (app.js:723), <anonymous>:126:12)
    at VueComponent.eval (eval at <anonymous> (app.js:981), <anonymous>:1:9590)
    at Array.eval (eval at <anonymous> (app.js:723), <anonymous>:464:20)
    at nextTickHandler (eval at <anonymous> (app.js:723), <anonymous>:413:16)
logError @ vue.esm.js?b5dc:426

您好，我想咨询一下你项目里面的index.js的内容从何而来

您好，我想咨询一下你项目里面的index.js的内容从何而来。我想用腾讯地图做一个vue组件。学习了你的项目，想去实践一下。但是不知道这个index.js的内容从何而来。

不能用鼠标缩放

自定义覆盖物如何添加？

需要添加自定义覆盖物的话，现在支持吗？

请问咱们框架，未来会有很大变动吗？

如题。现在处于开发的什么阶段？未来会有扩充或者较大的变化吗？

能不能直接引用js文件来使用呢?

就是说不用webpack,直接在页面中引用script src 这种方式使用这个地图组件呢???

我把index.js加进去,然后

Vue.use(VueBaiduMap , {
ak:"xxx"
});

这样,不起作用....

如果可以,应该怎么做呢?

地图组件的点覆盖物无法正常显示

问题：只有marker组件没有显示，circle等其他覆盖物组件可以正常显示

猜测：marker组件已经出现在地图上，但是没有默认的红色标记点。首次使用，也许有什么遗漏造成的。
html代码：

<template>
  <baidu-map class="bm-view" :center="{lng: 116.404, lat: 39.915}" ak="3uqSBTvQbGFsMH7nn10I8aoOWkWDRV7R" @click="click">
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"/>
    <bm-marker ref="mark" :position="{lng: 116.404, lat: 39.915}">
    </bm-marker>
    <bm-circle :center="circlePath.center" :radius="circlePath.radius" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true"></bm-circle>
  </baidu-map>
</template>

js代码：

export default {
  data() {
    return {
      position: {},
      circlePath: {
        center: {
          lng: 116.404,
          lat: 39.915
        },
        radius: 500
      }
    }
  },
  methods: {
    click(e) {
      this.position = {
        lng: e.point.lng,
        lat: e.point.lat


      }
    }
  }
}

截图：

使用infowindow组件时候会报出一个错

Uncaught (in promise) TypeError: Cannot read property 'querySelectorAll' of undefined

地图的默认字体和官方的不太一样，导致增加路况层的时候出现重影

官方默认字体：

本地图字体：

增加路况图层后出现重影：

测试代码：

<template>
	<baidu-map v-bind:style="{
		width: '100%',
		height: mapHeight + 'px'
	}" 
		:center="{lng: 116.404, lat: 39.915}" 
		:zoom="15" 
		:scroll-wheel-zoom="true" 
		@ready="ready"
		>
		
	</baidu-map>
</template>

<script>
	export default{
		data() {
			return{
				mapHeight: 400
			}
		},
		mounted() {
			this.mapHeight = 500;
		},
		methods:{
			ready(obj){
				const { BMap, map } = obj;
				map.addTileLayer(new BMap.TrafficLayer);
				
			}
		}
	}
</script>

百度地图原生api里面有个 Geocoder()方法，应该怎么用啊

百度地图原生api里面有个 Geocoder()方法，应该怎么复用啊，有什么组件吗，就是我想实现一个功能，点击地图上的地点，然后可以获取到那个位置上的信息。

绘制圆形的例子跑不起来，帮忙看下吧，谢谢

文档地址：https://dafrok.github.io/vue-baidu-map/#/overlay/circle

感觉组件参数传的有错误，<map-overlay-circle :center的值应该是个Point对像，例子中传的是个数组，但即便是改成对象也报错，实在没办法了，所以只能求助大神了~

鼠标绘制工具条库有计划加吗？

Hi,大神如题有计划没？

没有找到清除覆盖物的方法

我又来我现在想要在检索后清除所有的覆盖物然后添加检索第一条的数据为marker 然后可以拖动改变位置没有找到clearOverlays清除覆盖物的方法

autoLocation 无法自动获取定位

在定位控件中加入 :autoLocation = "true", 但是第一次打开地图的时候无法获取定位。

自行用geolocation 来获取定位，更新center后地图却不移动，一定要主动点击定位控件才会聚焦到定位地点。

你好，那个地区检索好像用不了，关键词就可以，请问这是什么原因？

不能出现mark标志，地图经纬度已经过去但是没显示标志

地图左下方为什么有其他的网站

& OpenStreetMap & HERE

版权的例子也运行错误，请抽空帮忙再看下吧

使用bm-marker自定义图标出错

标签：
<bm-marker :position="{lng: bmap.longitude, lat: bmap.latitude}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" :icon="{url: 'http://xxx.xxx.com/images/[email protected]', size: {width: 56, height: 56}}"> </bm-marker>
错误提示：
[Vue warn]: Error in callback for watcher "icon": (found in <BmMarker>)
app.js:4152 TypeError: Cannot read property 'setIcon' of undefined at VueComponent.handler (app.js:12041) at Watcher.run (app.js:5254) at flushSchedulerQueue (app.js:5034) at Array.<anonymous> (app.js:3210) at nextTickHandler (app.js:3159) at <anonymous>

地图缩放的性能为什么不如官方的好

使用你们的组件，地图用滚轮缩放的时候的体验比不上不用组件流畅啊
1）没有缓存的情况下，缩放时少量情况下需要等待1S以上
2）拖动的时候，没有惯性效果

局部注册出错

按照官方文档步骤，局部注册报错。
以上是代码截图。请问哪里出错了么？

设置 center 属性无法定位境外地区

首先非常感谢您的开源库，非常感谢，

我在设置 center 属性时遇到点问题：
:center="'杭州市'" 这样是正常的，地区会切换到杭州市。
:center="'New York'" 这样地图是一片空白，打开浏览器控制台提示：

VM48647:1 Uncaught TypeError: Cannot read property 'style' of undefined
at Gg.Ig.VO (eval at yZ xxxx)

center 属性是不能解析国外的地址吗？
我想实现的效果是，有个输入框，输入美国的一些城市或者街区，地区能相应的切换，但是设置 center 属性遇到了这个问题，不知道怎么回事。

开发环境：
"vue-baidu-map": "^0.10.4"
"vue": "^2.2.6",

麻烦您了，再次感谢。

设置点自定义图标报错。

[Vue warn]: Error in callback for watcher "icon":
(found in )

TypeError: Cannot read property 'setIcon' of undefined
at VueComponent.handler (eval at (app.js:3479), :1:30612)
at Watcher.run (eval at (app.js:809), :2552:19)
at flushSchedulerQueue (eval at (app.js:809), :2330:13)
at Array.eval (eval at (app.js:809), :506:20)
at nextTickHandler (eval at (app.js:809), :455:16)

正常安装注册地图，更新到最新版本后，使用报错，是什么原因呢

marker的属性没写全？

怎么设置信息窗口，marker 里面只有一个 label 的例子。marker 有 infowindowclose infowindowopen 这两个事件，怎么能触发？能随手写个点和弹框的例子吗？麻烦了！！

能否通过自定义坐标搜索附近区域

萌新的实习生又来问你问题了（

前后台我都写，有这样一个需求想和您讨论一下
定位前提下，搜索周边保险公司（很多数据都是在本地，没有录入百度地图上），后台返回经纬度和公司信息，能通过geohash去查询附近地址吗，再通过BmMarker去渲染。

关于Localsearch

对比了一圈，发现你的vue版本用的2.1.8,我的是2.2.2.webpack你的版本是1.X，我的版本是2.X。不知道会不会是版本引起的返回参数undefined

【问题】请问bm-marker能否实现多点标注？

尝试过用以下代码测试但不能成功实现多点标注。

我爱北京*** <script> export default { mounted() { }, data () { return { show: false, markerPoint1: {lng: 116.404, lat: 39.915}, markerPoint2: {lng: 116.804, lat: 39.415}, } }, methods: { infoWindowClose () { this.show = false }, infoWindowOpen () { this.show = true } } } </script>

获取地图实例问题

 <template>
          <baidu-map class="map-container" id="allmap" ref="map"> 
                <map-view
                    class="map"
                    :scroll-wheel-zoom="true"
                    :center="center"
                    :zoom="zoom"
                    @moving="syncCenter"
                    @moveend="syncCenter"
                    @zoomend="syncZoom" >  
                </map-view> 
            </baidu-map>
 </template>

//成功获取坐标后调用
findNearby(longitude, latitude) {
    let map = new BMap.Map("allmap")
    //获取坐标后zoom到一定比例
    map.centerAndZoom(new BMap.Point(longitude, latitude), this.zoom);
    //获取搜索实例
    let local = new BMap.LocalSearch(map, {
                    renderOptions: {
                        map: map,
                        autoViewport: true
                    }
                });
    //搜索附近 
    local.searchNearby(this.$route.params.search_name, new BMap.Point(longitude, latitude));
}

我又来了：p

有个问题想请教一下我通过this.$refs.map 获取实例后不知道如何进行LocalSearch
于是我就new BMap了但是新创建对象标签里面的syncCenter都失效了这该如何解决

关于使用v-for增加覆盖物的问题

下面代码如果放开注释部分浏览器会报错，如果v-for部分的pointList不变化，或者不添加bm-navigation都没问题，两者共存就报错了。

<template lang="html">
<baidu-map :center="BDMap.center" @ready="handler" :zoom="BDMap.zoom" class="bm-view">
    <bm-marker
    v-for="point in pointList"
    :position="{lng: point.lng, lat: point.lat}">
    </bm-marker>
    <!-- 以下部分放开会报错 -->
    <!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"/> -->
</baidu-map>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      BDMap: {
        center: {
          lng: 116.404,
          lat: 39.955
        },
        zoom: 12
      },
      pointList: [{
        lng: 116.414,
        lat: 39.915,
      }, {
        lng: 116.424,
        lat: 39.915,
      }]
    }
  },
  methods: {
    handler() {
      this.pointList.push({
        id: 1,
        lng: 116.524,
        lat: 39.955
      })
    }
  }
}
</script>

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

chrome报错如下

vue.esm.js?65d7:467 DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at Object.insertBefore (eval at <anonymous> (http://localhost:2001/app.js:810:1), <anonymous>:4407:14)
    at insert (eval at <anonymous> (http://localhost:2001/app.js:810:1), <anonymous>:4713:17)
    at createElm (eval at <anonymous> (http://localhost:2001/app.js:810:1), <anonymous>:4643:7)
    at VueComponent.patch [as __patch__] (eval at <anonymous> (http://localhost:2001/app.js:810:1), <anonymous>:5054:7)
    at VueComponent.Vue._update (eval at <anonymous> (http://localhost:2001/app.js:810:1), <anonymous>:2034:19)
    at VueComponent.updateComponent (eval at <anonymous> (http://localhost:2001/app.js:810:1), <anonymous>:2157:10)
    at Watcher.get (eval at <anonymous> (http://localhost:2001/app.js:810:1), <anonymous>:2468:25)
    at new Watcher (eval at <anonymous> (http://localhost:2001/app.js:810:1), <anonymous>:2451:12)
    at mountComponent (eval at <anonymous> (http://localhost:2001/app.js:810:1), <anonymous>:2161:17)
    at init (eval at <anonymous> (http://localhost:2001/app.js:810:1), <anonymous>:2930:13)
logError @ vue.esm.js?65d7:467