vue项目（vue-cli3）引入百度地图

最新推荐文章于 2024-08-21 10:02:50 发布

笑笑菇凉

最新推荐文章于 2024-08-21 10:02:50 发布

阅读量7.2k

点赞数 2

分类专栏：扩展功能文章标签： vue js 定位

本文链接：https://blog.csdn.net/qingwu1104/article/details/104747864

版权

本文介绍了如何在Vue-cli3项目中引入并使用百度地图，包括在index.html中添加地图脚本，配置vue.config.js，开发公用地图组件，以及如何在业务组件中引入和使用这些公用组件。

摘要由CSDN通过智能技术生成

第一步骤

在 index.html 中写上

<script  type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥&s=1" ></script>

注：如果服务器的访问协议是https，则以上src也需要改为https协议

第二步骤

在 vue.config.js 中写上

在这里插入图片描述

第三步骤

公用组件开发

<template>
  <div v-show="visible" class="map">
    <div id="map-core"></div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: 'theMap',
  data () {
    return {
      visible:true,
      location: {
        lng: '',
        lat: ''
      },
      map: {},
      ac: {}
    }
  },
  mounted () {
    this.setMap()
    this.setSearch()
  },
  methods: {
    // 初始化地图
    setMap () {
      this.map = new BMap.Map('map-core')
      this.map.centerAndZoom(new BMap.Point(113.275, 23.117), 10)
      // 地图缩放控件
      const topLeftControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT})
      // 城市选择控件
      const cityListControl = new BMap.CityListControl({anchor: BMAP_ANCHOR_TOP_RIGHT})
      // 比例尺控件
      const topLeftNavigation = new B