dafrok / vue-baidu-map Goto Github PK

<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>

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


      }
    }
  }
}

 <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));
}

  <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);
            }

        },

<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);  

<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

`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.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

    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
      }
    }

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