初探高德地图

最新推荐文章于 2022-06-21 20:27:46 发布

richest_qi

最新推荐文章于 2022-06-21 20:27:46 发布

阅读量413

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qzw752890913/article/details/109209745

版权

JavaScript 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

代码结构

在这里插入图片描述

搭建小型web服务器

npm init -y
npm install --save-dev express

// server.js
const express = require("express");
const server = express();
server.use(express.static("src"));
server.listen(3000,function(){
    console.log("listening on *:3000");
})

node server.js启动该服务。

前端代码

<!DOCTYPE html>
<!-- index.html -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=*************"></script> 
    <style>
        #container{
            width: 500px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
    var map = new AMap.Map('container', {
        center: [116.397428, 39.90923],
        zoom: 13
    });
    </script>
</body>
</html>

https://webapi.amap.com/maps?v=2.0&key=*************，其中key值需要在高德开放平台上申请获取。

效果

在这里插入图片描述

参考文档

高德地图开发文档

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初探高德地图

代码结构搭建小型web服务器npm init -ynpm install --save-dev express// server.jsconst express = require("express");const server = express();server.use(express.static("src"));server.listen(3000,function(){ console.log("listening on *:3000");})node serve
复制链接

扫一扫