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

最新推荐文章于 2025-08-05 15:04:38 发布

原创最新推荐文章于 2025-08-05 15:04:38 发布 · 9.9k 阅读

13 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

105 篇文章

订阅专栏

本文介绍如何在网站中嵌入百度地图和谷歌地图，并详细展示了在React项目中使用百度地图API的具体步骤。

一、百度地图

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

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

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

a、地图的宽和高

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

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

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

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

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

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

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

二、谷歌地图

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

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

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

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

<div class="row map">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <iframe src="http://www.google.cn/maps/embed?pb=!1m18!1m12!1m3!1d3508.726978125245!2d121.59075431559972!3d28.427493982499115!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x344e2a2fe8b8c895%3A0x3f32b9472ae753a3!2z5pmo5YWJ6Lev!5e0!3m2!1szh-CN!2scn!4v1530497638193" width="100%" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
            </div> 
        </div>

三、react中插入百度地图

1、百度地图登录

http://lbsyun.baidu.com/

2、获取密钥

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

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

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

4、安装map

直接npm install map报错

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

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

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