vue create appName /react-create-app appName 脚手架方式创建应用使用百度地图

最新推荐文章于 2024-08-18 11:52:46 发布

jjw_zyfx

最新推荐文章于 2024-08-18 11:52:46 发布

阅读量727

点赞数

分类专栏： vue react 百度地图

本文链接：https://blog.csdn.net/jjw_zyfx/article/details/101783138

版权

vue 同时被 3 个专栏收录

142 篇文章 2 订阅

订阅专栏

react

45 篇文章 2 订阅

订阅专栏

百度地图

10 篇文章 0 订阅

订阅专栏

vue配置：

第一步

标签内容2.0 的用这个

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

标签内容3.0的用这个

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的ak"></script>

第二步：

module.exports = {
   /*如果前边有别的配置注意用,隔开*/
   configureWebpack: {
      externals: {
         "BMap": "BMap"
      }
   }
}

第三步：

使用：

<template>
  // 注意一定要给这个标签设置个宽高都设置
  <div id="map">  
  </div>
</template>

<script>
import BMap from 'BMap'
export default {
  name: 'Map',
  data () {
    return {
    }
  },
  methods: {
    createMap () {
      /* eslint-disable */
      // 创建Map实例 这里边的map就是id="map"
      var map = new BMap.Map("map")
      // 初始化地图,设置中心点坐标和地图级别
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11)
      //添加地图类型控件
      map.addControl(new BMap.MapTypeControl({
        mapTypes:[BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
      }))
      // 设置地图显示的城市 此项是必须设置的
      map.setCurrentCity("北京")
      //开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true)
      /* eslint-enable */
    }
  },
  mounted () {
    this.createMap()
  }
}
</script>
<style scoped >
#map{
  height: 100px;
  width:100px;
}
</style>

参考链接：

https://juejin.im/post/5bc1515fe51d450e5e0cbf87

vue完了

补充：

React配置如下：

第一步：

标签内容2.0 的用这个

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

标签内容3.0的用这个

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的ak"></script>

// 拓展外部应用
externals:{
  'BMap':'BMap'
}

第三步使用还是一定要设置id="mapContainer"的宽和高

import React, { Component } from 'react';
import BMap  from 'BMap';
import './App.css';

class App extends Component {

  componentDidMount () {
    var map = new BMap.Map("mapContainer"); // 创建Map实例  这个就是标签id为mapContainer的
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
    map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  }

  render() {
    return (
      <div>
        <div className="mapContainer" id="mapContainer"></div>
      </div>
    );
  }
}

export default App;

至此结束