分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

上传高德地图-express框架

发布时间:2023-09-06 01:31责任编辑:傅花花关键词:暂无标签

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>

上传高德地图-express框架

原文地址:http://www.cnblogs.com/ddnh/p/8087005.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved