html页面插入百度谷歌地图,react中插入百度地图

青旅半醒 2022-05-21 05:24 407阅读 0赞

一、百度地图

1、打开“百度地图生成器”的网址：http://api.map.baidu.com/lbsapi/creatmap/index.html

2、在“1.定位中心点”中，查找具体位置

![70][]

3、在“2.设置地图”中，按照自己的需求修改地图的外观：

a、地图的宽和高

b、地图上显示的按钮（缩放、缩略图、比例尺）

c、鼠标和键盘对地图的操作

![70 1][]

4、在“3.添加标注”中，添加自己想要标注的位置和信息

![70 2][]

5、在“第二步 获取代码”中，点击“获取代码”按钮

![70 3][]

![70 4][]

6、把上一步生成的代码保存为html文件（假设保存为map.html）。记住在保存前将代码内

![70 5][]

修改为charset=utf-8"，这样，上一步添加标注里输入的备注和名称才不会乱码显示

7、使用iframe标签，把地图添加到现有的网页中，如：

二、谷歌地图

1、在谷歌地图中http://www.google.cn/maps/@35.780287,86.2064243,4z

输入地址，搜索到指定地点之后，点击“共享”按钮

![70 6][]

点击“共享按钮”之后，选择“嵌入地图”，然后点击“复制HTML”

![70 7][]

将复制的HTML代码粘贴到相应位置，根据自己需求修改宽高

三、react中插入百度地图

1、百度地图登录

http://lbsyun.baidu.com/

2、获取密钥

登录后在右上角的控制台里面申请

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

3、拿到密钥后，将百度API的script引入到public下的index.html文件

4、安装map

直接npm install map报错

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1][]

node\_modules文件夹下找react-script>config>webpack.config.js，然后我们打开该文件添加一句话(记得重启才会生效)

externals:{
        'BMap':'BMap',
      }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2][]

5、使用demo

import React from 'react'
    import ReactDOM from 'react-dom'
    import BMap from 'BMap'
    class BaiduMap extends React.Component {
     
    componentDidMount () {
     var map = new BMap.Map("allmap"); // 创建Map实例
        map.centerAndZoom(new BMap.Point(121.254944, 31.109615), 17); // 初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
        map.setCurrentCity("上海"); // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        // 创建点标记
        var marker1 = new BMap.Marker(new BMap.Point(121.254944, 31.109615));
        map.addOverlay(marker1);
    }
     
    render () {
      return (
        <div>
          <div
            id='allmap'
            style={
       {
              width:'100vw',
              height:'100vh'
             }} />
        </div>
           )
           }
    }
    ReactDOM.render(
      <BaiduMap />,
      document.getElementById('root')
    )

如果想要使用其他api，请查看链接：[http://lbsyun.baidu.com/jsdemo.htm\#eAddMarker][http_lbsyun.baidu.com_jsdemo.htm_eAddMarker]

[70]: /images/20220521/8d23ba12847c4881a5c10ec4df7ab8cf.png
[70 1]: /images/20220521/0362adbd544647baa8ff3c460006df30.png
[70 2]: /images/20220521/6a1862ecf42141d4acab88c2593f81a3.png
[70 3]: /images/20220521/3269d9e2584d40468eacabe488cb3ec7.png
[70 4]: /images/20220521/1c7f8d76b904472eb611baf43b7690bc.png
[70 5]: /images/20220521/23ef827aaa2e46a791b39352c732207e.png
[70 6]: /images/20220521/3547159756f04ae5a72e6063ee736d0c.png
[70 7]: /images/20220521/b7297d75f6c74e0b83f63e7293624e36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20220521/b9aa622109744b5cad8d4c509b39ba0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1]: /images/20220521/c17df05f3a1f4ad2be5481ef91890abb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2]: /images/20220521/06f38f444d5f475e856164aac452ec9b.png
[http_lbsyun.baidu.com_jsdemo.htm_eAddMarker]: http://lbsyun.baidu.com/jsdemo.htm#eAddMarker