百度地图的应用&&如何在react中引入百度地图

最新推荐文章于 2022-10-25 11:48:12 发布

墨水清痕

最新推荐文章于 2022-10-25 11:48:12 发布

阅读量527

点赞数

文章标签： react.js 百度 javascript

本文链接：https://blog.csdn.net/Syh265/article/details/122462416

版权

百度地图

首先，如果想调用百度地图api，你需要获取一个百度地图api的密钥。地址：百度地图平台

//1.引入src添加ak
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的秘钥"></script>

2.div存放地图（注意设置宽高)
<div id="container"></div>

// 创建换一个地图实例
var map = new BMapGL.Map("container");
 // 创建一个点
var point = new BMapGL.Point(113.6648, 34.7835);
// 设置缩放与中心点
 map.centerAndZoom(point, 17);
 var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.setMapType(BMAP_EARTH_MAP);      //开启地球模式

在这里插入图片描述
完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>地图</title>
    <style type="text/css">
      html {
        height: 100%;
      }
      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
      #container {
        height: 100%;
      }
    </style>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的秘钥"
    ></script>
  </head>
  <body>
    <div id="container"></div>
    <script>
      //创建地图实例
      var map = new BMapGL.Map("container");
      //   设置中心点坐标
      var point = new BMapGL.Point(116.404, 39.915);
      //   地图初始化，同时设置地图展示级别
      map.centerAndZoom(point, 15);
      var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
      map.addControl(scaleCtrl);
      var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
      map.addControl(zoomCtrl);
      var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
      map.addControl(cityCtrl);
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式
    </script>
  </body>
</html>

地图的绘制

<script>
      // 创建换一个地图实例
      var map = new BMapGL.Map("container");
      // 创建一个点
      var point = new BMapGL.Point(113.2648, 34.7835);

      // 设置缩放与中心点
      map.centerAndZoom(point, 17);

      // 地图控件
      var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
      map.addControl(scaleCtrl);
      var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
      map.addControl(zoomCtrl);
      var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
      map.addControl(cityCtrl);

      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      // map.setMapType(BMAP_EARTH_MAP);      //开启地球模式

      // 绘制点
      var marker = new BMapGL.Marker(point);
      // 视图中添加点
      map.addOverlay(marker);

      var tempList = [];

      // 给地图添加事件
      var last = null;

      map.addEventListener("click", function (e) {
        // console.log('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);
        // 单击的时候创建一个点
        var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);

        //添加到数组中
        tempList.push(p);
        // 创建一个标记
        var m = new BMapGL.Marker(p);
        if (last) {
          map.removeOverlay(last);
        }
        last = m;
        // 添加标记
        map.addOverlay(m);
        console.log(tempList);
      });

      map.addEventListener("dblclick", function () {
        tempList.push(tempList[0]);
        if (last) {
          map.removeOverlay(last);
        }
        var polyline = new BMapGL.Polyline(tempList, {
          strokeColor: "blue",
          strokeWeight: 2,
          strokeOpacity: 0.5,
          fillColor: "red",
        });
        map.addOverlay(polyline);
        tempList = [];
      });

      var circle = new BMapGL.Circle(point, 500, {
        strokeColor: "blue",
        strokeWeight: 2,
        strokeOpacity: 0.5,
      }); //创建圆
      map.addOverlay(circle);
    </script>

在这里插入图片描述

地图的标注

    <script>
      // 创建换一个地图实例
      var map = new BMapGL.Map("container");
      // 创建一个点
      var point = new BMapGL.Point(113.2648, 34.7835);

      // 设置缩放与中心点
      map.centerAndZoom(point, 17);

      // 地图控件
      var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
      map.addControl(scaleCtrl);
      var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
      map.addControl(zoomCtrl);
      var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
      map.addControl(cityCtrl);

      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      // map.setMapType(BMAP_EARTH_MAP);      //开启地球模式

      var content = "中国";
      var label = new BMapGL.Label(content, {
        // 创建文本标注
        position: point,
        offset: new BMapGL.Size(10, 20),
      });
      map.addOverlay(label); // 将标注添加到地图中
      label.setStyle({
        // 设置label的样式
        color: "#f30",
        fontSize: "12px",
        border: "2px solid #f70",
      });

      // 添加一个标记
      var marker = new BMapGL.Marker(point);
      // 将标注添加到地图中
      map.addOverlay(marker);
      //  信息窗口的选项
      var opts = {
        width: 200, // 信息窗口宽度
        height: 100, // 信息窗口高度
        title: "地方", // 信息窗口标题
      };
      var infoWindow = new BMapGL.InfoWindow(
        "地址：郑州",
        opts
      ); // 创建信息窗口对象
      marker.addEventListener("click", function () {
        map.openInfoWindow(infoWindow, point); //开启信息窗口
      });
    </script>

在这里插入图片描述

react中的地图引用

//安装：
npm install react-bmapgl --save

在public/index.html引入

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的秘钥"></script>

3.引入组件

// 导入地图组件
import {Map, Marker, NavigationControl, InfoWindow,Polyline,Polygon,ZoomControl } from 'react-bmapgl';

import React, { Component } from 'react'
// 导入地图组件
import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmapgl';
class OrderDetail extends Component {
    constructor(props) {
        super(props);
        this.state = { details:{} }
    }
    render() { 
        return ( <div>
            <h1>订单详情</h1>
            {details.order_sn?<Map center={{lng: 116.402544, lat: 39.928216}} zoom="11">
                    <Marker position={{lng: 116.402544, lat: 39.928216}} />
                    <NavigationControl /> 
                    <InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="内容" title="标题"/>
                </Map>:'数据加载中'
            }
        </div> );
    }
}
 
export default OrderDetail;