html 如何引入 百度地图

要在网页中创建和初始化一个地图,通常需要经过以下几个步骤:获取API密钥(Access key 百度地图开放平台自行注册获取)、加载API脚本、编写HTML、编写JS代码。

下面代码自行测试

html

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度地图示例</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的API密钥"></script>
</head>
<body>
    <div id="mapCon" style="width: 100%; height: 500px;"></div>
    <script type="text/javascript">
        var map = new BMap.Map('mapCon');  //创建地图实例
        map.centerAndZoom(new BMap.Point(120.599847, 31.382564), 19); //设置中心点和地图级别
        map.addControl(
          new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] })//添加地图类型控件
        );
        map.addOverlay(new BMap.Marker(new BMap.Point(120.599847, 31.382564)));  //添加标注
        map.enableScrollWheelZoom(true);  //启用鼠标滚轮缩放功能
    </script>
</body>
</html>

vue

复制代码
<template>
  <div id="mapCon" style="width: 100%; height: 500px;"></div>
</template>

<script>
export default {
  name: 'BaiduMap',
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 确保百度地图API脚本已经加载完成
      this.loadBMapScript().then(() => {
        // 创建地图实例
        var map = new BMap.Map('mapCon');
        // 设置中心点坐标和地图级别
        map.centerAndZoom(new BMap.Point(120.599847, 31.382564), 19);
        // 添加地图类型控件
        map.addControl(
          new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] })
        );
        // 添加标注
        map.addOverlay(new BMap.Marker(new BMap.Point(120.599847, 31.382564)));
        // 启用鼠标滚轮缩放
        map.enableScrollWheelZoom(true);
      });
    },
    loadBMapScript() {
      return new Promise((resolve, reject) => {
        if (typeof BMap !== 'undefined') {
          resolve();
          return;
        }         //检查百度地图API是否已加载
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'http://api.map.baidu.com/api?v=3.0&ak=你的API密钥'; //创建<script>
        script.onerror = reject;  //处理脚本加载失败和成功
        script.onload = resolve;
        document.head.appendChild(script);
      });
    },
  },
};
</script>

<style>
/* 你的样式 */
</style>
相关推荐
黄焖鸡能干四碗23 分钟前
系统安全设计方案,软件系统安全设计方案
开发语言·数据库·安全·vue·系统安全
知识分享小能手14 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
百锦再3 天前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
飞翔的佩奇3 天前
Java项目:基于SSM框架实现的忘忧小区物业管理系统【ssm+B/S架构+源码+数据库+毕业论文+开题报告】
java·数据库·mysql·vue·毕业设计·ssm框架·小区物业管理系统
百锦再5 天前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
一笑code5 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
eric*16885 天前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
喜欢敲代码的程序员6 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_6 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte6 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue