文档章节

系列一、入门教程web端实现地图功能

我叫小糖主
 我叫小糖主
发布于 05/27 14:48
字数 946
阅读 31
收藏 0

废话不多说,社会我多多

实现步骤如下

第一步、在高德api注册账户

搜索高德api点击进入官网,自己注册一个账号,你懂得怎么注册撒

 

点击进入下图画框位置,来到官网api入门教程

第二步、按照以下步骤准备运行需要的条件

一、按照第一张截图准备需要运行的引入内容

当然,你最好选择快速入门

二、创建一个你自己的key值

先创建一个你自己的应用,然后添加key值,然后把key值复制到你加载jsp api标注好你需要填写key至的地方,有一个值得注意的问题,添加key值得时候一定要根据自己的需求去添加,比如我们是在web端运行就选择

下图2标注的那个框

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <title>地图显示</title>
    <style>
        html,
        body,
        #container {
          width: 100%;
          height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=1.4.14&key=申请的key值"></script>
<script>
	//初始化地图设置初始化中心位置,设置标注点
	var lnglat=[106.469344,29.497171];
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:16, //初始化地图层级
        center:lnglat  //初始化地图中心点
    });
	//新建标注点
	var marker = new AMap.Marker({
	    position: lnglat
	});
	//保存标注点
	marker.setMap(map);
</script>
</body>
</html>

运行结果如下:很清晰的标注出了我家所在的位置

第三、实现带导航和搜索功能的标注

实现效果如下,那么怎么弄啦!!这个也很好办,刚刚不是已经实现了乞丐版了嘛?现在实现高级版本

一、点击进入示例中心,点击地图事件,进入点击和鼠标事件

然后按照我下面贴出来的代码操作就好了!!!就能实现你需要的功能了!!!

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>保利可爱岛</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .custom-input-card {
            width: 22rem;
        }

        .custom-input-card .btn {
            margin-right: 1rem;
        }

        .custom-input-card .btn:last-child {
            margin-right: 0;
        }

        .info-title {
            color: white;
            font-size: 14px;
            background-color: #25A5F7;
            line-height: 26px;
            padding: 0px 0 0 6px;
            font-weight: lighter;
            letter-spacing: 1px
        }

        .info-content {
            font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
            padding: 4px;
            color: #666666;
            line-height: 23px;
        }

        .info-content img {
            float: left;
            margin: 3px;
        }

        .amap-info-combo .keyword-input{
            height: 25px;
            border-radius: 2px 0 0 2px;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="input-card custom-input-card">
<!--    <div class="input-item">
        <input type="button" class="btn" value="信息窗体" onClick="infowindow1.open(map,lnglat)"/>
    </div> -->
</div>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.14&key=申请的key值&plugin=AMap.AdvancedInfoWindow"></script>
<script type="text/javascript">
	//第一步、初始化marker参数
    var lnglat = [106.469344,29.497171];
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: lnglat,
        zoom: 16
    });
    var marker = new AMap.Marker({
        position: lnglat
    });
    marker.setMap(map);
	//第三步、绑定点击事件
	marker.on('click',function(){
		infowindow1.open(map,lnglat);
	});
        //第二步、设置信息窗体样式
		var content = '<div class="info-title">保利可爱岛</div><div class="info-content">' +
		    '<img src="img/baoli.jpg">' +
		    '19年央企品牌积淀,24座城市布局,用心构筑西城浪漫理想国。<br/>' /* +
		    '<a target="_blank" href = "https://mobile.amap.com/">点击下载高德地图</a></div>' */;
		var infowindow1 = new AMap.AdvancedInfoWindow({
		    content: content,
		    offset: new AMap.Pixel(0, -30)
		});
</script>
</body>
</html>

各位大佬们,原创不易,请各位大佬点个赞再走吧,感谢各位大佬!!!

© 著作权归作者所有

我叫小糖主
粉丝 7
博文 46
码字总数 54334
作品 0
大渡口
私信 提问
移动开发之微信小程序——资料集合

本文转载自:知乎 有需要下载的客官可可以点击知乎去下载相关资料 一:官方地址集合: 1:官方工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476434678461 2:...

DJY1992
2016/12/21
0
0
微信应用号开发必备技能都在这里了啦!

“微信应用号”就像平地里炸响的一声春雷,在互联网圈内炸开了锅,小代码小程序即将成为主流,H5迎来了自己的第二春。废话少说,关于微信应用号开发技能,你都掌握了吗? 没掌握的看这里,干...

咖啡
2016/09/23
0
0
从零开始学做微信小程序,看这些就够了!

随着正式开放公测,微信小程序再次万众瞩目,越来越多的企业和个人涌入到小程序开发的大军中。小程序究竟是什么?适合做小程序的产品有哪些?做小程序需要提前准备什么?如何零基础学做小程序...

王练
2016/11/09
27.7K
22
史上最全的前端资源大汇总

1.前言 最近有很多朋友问我有没有相关的书籍推荐,希望能够自学一下前端。 正好最近在查阅文章的时候,发现有朋友已经进行过总结。 经过沟通和“行贿”��,终于取得转载权利,在此感谢晚晴...

mr_lp
2017/01/13
0
0
自学MVC看这里——全网最全ASP.NET MVC 教程汇总

MVC架构已深得人心,微软也不甘落后,推出了Asp.net MVC。小编特意整理博客园乃至整个网络最具价值的MVC技术原创文章,为想要学习ASP.NET MVC技术的学习者提供一个整合学习入口。本文从Why,W...

葡萄城控件技术团队
2016/08/18
204
0

没有更多内容

加载失败,请刷新页面

加载更多

中奖名单 | “赠书活动”中奖名单公布

在上周的赠书活动中, 小伙伴们踊跃参与! 京小云也很认真地进行了统计, 非常感谢大家的参与和支持! 下面公布中奖的名单~ 请中奖的小伙伴于5个工作日内 在微信公众号后台留下你的联系地址 ...

京东云技术新知
14分钟前
1
0
云原生生态周报 Vol. 11 | K8s 1.16 早知道

业界要闻 Pivotal 发布了完全基于 Kubernetes 的 Pivotal Application Service(PAS)预览版 这意味着 Pivotal 公司一直以来在持续运作的老牌 PaaS 项目 Cloud Foundry (CF)终于得以正式拥...

阿里巴巴云原生
14分钟前
0
0
低版本xcode真机调试iOS 12.3.1

老款mac pro已经升级不了系统了,导致最新版的xcode10.2及以上也安装不了,最新版的ios12.3.1也联机调试不了,apple是要逼着大家升级硬件啊,软件即服务,就是这样来的,大部分计算机软件公司...

swingcoder
15分钟前
4
0
浅谈堆排序

一:定义 堆排序(英语:Heapsort)是指利用堆这种数据结构所设计的一种排序算法。堆排序是一种树形选择排序,在排序过程中可以把元素看成是一颗完全二叉树,每个节点都大(小)于它的两个子...

无名氏的程序员
17分钟前
2
0
Alibaba Cloud Linux 2 开源后又有什么新动作?

阿里妹导读:2019 年 4 月,Alibaba Cloud Linux 2 (Aliyun Linux 2) 正式开源。时至今日,已经走过三个月的里程。在这段时间内,这个刚诞生不久的为阿里云 ECS 环境定制优化的 Linux 操作系...

阿里云官方博客
17分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部