express中使用高德地图

本文详细介绍了如何利用高德地图API在网页上展示地图。首先需要注册成为开发者并获取key值,接着通过简单的代码实现地图加载及自定义标记等功能。文章提供了完整的代码示例,帮助读者快速上手。

1.首先要注册高德地图,完后成为开发者

2.控制台里获取自己的key值

3.在要显示地图的页面添加如下的代码

<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
<div id="container" style="height: 600px"></div>

<script>

var toolBar;
var customMarker = new AMap.Marker({
offset: new AMap.Pixel(-14, -34),     //相对于基点的位置
icon: new AMap.Icon({     //复杂图标
size: new AMap.Size(27, 36),     //图标大小
image: "http://webapi.amap.com/images/custom_a_j.png",      //大图地址
imageOffset: new AMap.Pixel(-28, 0)         //相对于大图的取图位置
})
});
var map = new AMap.Map('container', {
resizeEnable: true,
zoom:11,
center: [116.397428, 39.90923]
});
AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView'],
function(){
map.addControl(new AMap.ToolBar());

map.addControl(new AMap.Scale());

map.addControl(new AMap.OverView({isOpen:true}));
});

</script>

4.在登录后的页面头加入

<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://webapi.amap.com/maps?v=1.4.2&key=您的key值"></script>

转载于:https://www.cnblogs.com/guanghuizhang/p/8184271.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值