博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
web端创建地图
阅读量:5055 次
发布时间:2019-06-12

本文共 1056 字,大约阅读时间需要 3 分钟。

1》在首部引入标签

<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />

<script src="http://webapi.amap.com/maps?v=1.4.2&key=17c8ae918f4e9d678da9e4c077b3301b"></script>

<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

2》HTML需要的位置

<!--地图-->

<div id="container" class="ditu" style=" margin: 0 auto;height:41%;">
</div>

3》js中(记得更改需要位置的经纬度center,以及地名)

//地图

var map = new AMap.Map('container', {
resizeEnable: true,
center: [113.949754,22.550679],
zoom: 13
});
var marker = new AMap.Marker({
position: map.getCenter()
});
marker.setMap(map);
// 设置鼠标划过点标记显示的文字提示
marker.setTitle('深圳市南山区科技园科丰路2号特发信息港D栋612');

// 设置label标签

marker.setLabel({ //label默认蓝框白底左上角显示,样式className为:amap-marker-label
offset: new AMap.Pixel(20, 20), //修改label相对于maker的位置
content: "深圳市南山区科技园科丰路2号特发信息港D栋612"
});
以上基本完成,效果图如下啦!!!

拓展》

1:高德地图获取当前位置经纬度:http://lbs.amap.com/console/show/picker

2:高德地图具体代码实现(张国荣):http://lbs.amap.com/api/javascript-api/example/callapp/markonapp

 

 

转载于:https://www.cnblogs.com/Fancy1486450630/p/9018310.html

你可能感兴趣的文章
公司培训lesson 1-代码质量
查看>>
JavaScript 仿LightBox内容显示效果
查看>>
python 字符串处理
查看>>
Do it early, do it often, do it automatically (转)
查看>>
Linux curl使用简单介绍
查看>>
CSDN可以直接扣扣登录.....如需查看我的博客去CSDN
查看>>
App弱网测试方式
查看>>
PHP zendstudio framework2配置过程
查看>>
Xor Sum 01字典树 hdu4825
查看>>
数据访问:三大范式
查看>>
Python基础-----random随机模块(验证码)
查看>>
手机端fixed底部跟着窗口动问题
查看>>
树专题(伸展树 / 树链剖分 / 动态树 学习笔记)
查看>>
HTML图像、超链接标签
查看>>
[国嵌攻略][164][USB驱动程序设计]
查看>>
C# 实现Bresenham算法(vs2010)
查看>>
基于iSCSI的SQL Server 2012群集测试(一)--SQL群集安装
查看>>
list 容器 排序函数.xml
查看>>
存储开头结尾使用begin tran,rollback tran作用?
查看>>
Activity启动过程中获取组件宽高的五种方式
查看>>