Directly to the code implementation

  • Introduce code in vue project public/index.html
<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' https://* 'unsafe-inline'; worker-src 'self' https://* http://* 'unsafe-inline'; script-src 'self' https://* 'unsafe-inline' 'unsafe-eval'" />
    <script type="text/javascript" src="Baidu ak https://api.map.baidu.com/api?v=3.0&ak= application"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
    <script type="text/javascript" src="Baidu ak https://webapi.amap.com/maps?v=1.4.15&key= application"></script>
    <script type="text/javascript" src="Baidu ak&plugin = https://webapi.amap.com/maps?v=1.4.15&key= application AMap. Autocomplete, AMap. PlaceSearch"></script>
    <script type="application/javascript">
    </script>
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <div id="app"></div>
    <! -- built files will be auto injected -->
  </body>
</html>
Copy the code

Remember to make sure that baidu map’s console application for permission to use JavaScript permission can be called.

  • Js configureWebpack configureWebpack configureWebpack configureWebpack configureWebpack configureWebpack
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        The '@': resolve('src')}},externals: {
      BMap: 'window.BMap'.BMapLib: 'window.BMapLib'}},Copy the code
  • Call the mouse drawing function of Baidu Map on the page,
<template> <div id="app"> <div id="container" style="width: 100%; min-height: 900px" /> </div> </template> <script> import BMap from 'BMap' import BMapLib from 'BMapLib' export default { name: 'OppoMap', data() { return { map: '', point_addr: '', drawer: false, distance: 0, overlays: [], coordinate: [] } }, mounted() { this.init() }, methods: {this.map = new map.map ('container') var poi = new map.point (118.800122, 32.064407) this. Map. CenterAndZoom (poi, 15). This map. EnableScrollWheelZoom () var styleOptions = {strokeColor: 'red', // Border color. FillColor: 'red', // fillColor. When the parameter is empty, the circle has no fill effect. StrokeWeight: 3, // Width of edge line, in pixels. StrokeOpacity: 0.8, // Edge opacity, the value range is 0-1. FillOpacity: 0.6, // The opacity of the fill ranges from 0 to 1. StrokeStyle: 'solid' // The bounding style, solid or consistent. Var drawingManager = new bmaplib. drawingManager (this.map, {isOpen: false, // whether to enable drawingmode enableSorption: EnableDrawingTool: true, // Whether to display toolbar drawingToolOptions: {anchor: BMAP_ANCHOR_TOP_RIGHT, // position offset: new map. Size(5, 5), // Deviation modes: [ BMAP_DRAWING_CIRCLE ] }, circleOptions: }) var circlecomplete = function(e) {drawingManager.close()} For drawing the drawingManager. AddEventListener (' circlecomplete ', circlecomplete) drawingManager.addEventListener('overlaycomplete', this.overlaycomplete) }, overlaycomplete(e) { console.log(e) const distance = BMapLib.GeoUtils.getDistance(e.overlay.point, e.overlay.ja[0]) if (distance === 0 || distance === null || distance === undefined) { return } const loading = this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 4)'}) this.clearall () this.overlays = [] this.coordinate = [] var myGeo = new map.geocoder ({extensions_town: true }) const _this = this myGeo.getLocation(new BMap.Point(e.overlay.point.lng, e.overlay.point.lat), function(result) { if (result) { _this.point_addr = result.address } }) this.distance = distance this.overlays.push(e.overlay) }, clearAll() { for (let i = 0; i < this.overlays.length; i++) { this.map.removeOverlay(this.overlays[i]) } this.overlays = [] this.coordinate = [] } } } </script>Copy the code

The above code can be used by copying it directly, and the overlayComplete listener is called when the mouse is drawn. You can call your own business code after drawing.

  • The code also includes how to use Baidu Map GeoUtils tool, this tool can determine whether the point is in the drawing of the graph, the specific use method can refer to the link: http://api.map.baidu.com/library/GeoUtils/1.2/docs/symbols/BMapLib.GeoUtils.html