项目需求:标注一个或者两个点、显示信息窗体、自定义icon

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style type="text/css">
body,html,#container{
height: %;
margin: 0px;
font-family: "微软雅黑"
}
.content{
padding-right: 5px;
color: #;
line-height: 23px;
font-size: 14px;
}</style>
<title>定位</title> </head>
<body>
<div id="container" tabindex=""></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=申请的key"></script>
<script type="text/javascript">
var pt1=${pt1};
var pt2=${pt2};
var location1 = "上海市盛夏路666号";
var location2 = "上海市南京西路";
//初始化地图对象,加载地图
var mapObj = new AMap.Map('container',{
resizeEnable: true,
});
//实例化marker pt为经纬度,infoTest为信息窗体显示文案,iconSrc为标注图标路径
function addMarker(pt,infoText,iconSrc){
marker=new AMap.Marker({
//标注图标
icon:new AMap.Icon({
imageSize:new AMap.Size(,),
size:new AMap.Size(,),
image:iconSrc
})
});
marker.setMap(mapObj);
marker.setPosition(pt);
//信息窗体内容
var infowindow = new AMap.InfoWindow({
content: '<div class="content">'+infoText+'</div>',
offset: new AMap.Pixel(, -)
});
//标注点击时显示信息窗体
marker.on('click',function(e){
infowindow.open(mapObj,e.target.getPosition());
});
infowindow.open(mapObj,marker.getPosition());
};
//地图工具条插件、地图比例尺插件
AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){
var toolBar = new AMap.ToolBar();
var scale = new AMap.Scale();
mapObj.addControl(toolBar);
mapObj.addControl(scale);
});
//添加点标记
if(pt1 != ''){
addMarker(pt1,location1,"/resources/img/endIcon.png");
if(pt2 != ''){
//设置地图到合适的视野级别
mapObj.setFitView();
}else{
//设置地图缩放比例
mapObj.setZoom();
//设置地图中心
mapObj.setCenter(pt1);
}
};
if(pt2 != ''){
addMarker(pt2,location2,"/resources/img/signInIcon.png");
if(pt1 != ''){
//设置地图到合适的视野级别
mapObj.setFitView();
}else{
//设置地图缩放比例
mapObj.setZoom();
//设置地图中心
mapObj.setCenter(pt2);
};
};
</script>
</body>
</html>

高德地图JavaScript开发的更多相关文章

  1. 高德地图JavaScript API开发研究

    高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种API接口向地图添加内容,创建功能丰富.交互性强的地图应用.高德地图JavaScript API ...

  2. 高德地图 JavaScript API 开发系列教程(二)

    上节简单介绍高德地图JavaScript API及网页中基本地图展示.有了地图后我们可以用来做什么?有人说离我最近的超市在哪里,我怎么去?别急,这些功能我们后面都会慢慢实现.今天为大家详细讲解如何在地 ...

  3. 高德地图 JavaScript API 开发系列教程(一)

    高德地图 API 提供包括 Web API 即 JavaScript API,Android API,定位API,IOS API,WP API,Win8 API等,本系列教程主要针对高德 JavaSc ...

  4. 百度地图JavaScript开发入门先知

    最近项目紧急开发了一些百度地图的功能,觉得百度地图实数强大!于是今天不忙总结一下,看到不错的文章先转载. 文章出处:https://www.opengps.cn/Blog/View.aspx?id=1 ...

  5. 高德地图API开发二三事(一)如何判断点是否在折线上及引申思考

    最近使用高德地图 JavaScript API 开发地图应用,提炼了不少心得,故写点博文,做个系列总结一下,希望能帮助到LBS开发同胞们. 项目客户端使用高德地图 JavaScript API,主要业 ...

  6. 高德地图Javascript API设置域名白名单

    在涉及到GPS地图相关应用的开发过程中,我们需要在高德开放平台注册相应的账号,并设置好相应应用来获取调用的Key值,该Key值直接放入到网站前端页面,针对任何人来说都可看到,因此我们防止他人盗用你的K ...

  7. web端高德地图javascript API的调用

    [转载https://www.cnblogs.com/zimuzimu/p/6202244.html]web端高德地图javascript API的调用 关于第三放地图的使用,腾讯.百度.高德 具体怎 ...

  8. 【原创】web端高德地图javascript API的调用

    关于第三放地图的使用,腾讯.百度.高德 具体怎么选择看你自己怎么选择了. 高德地图开放平台:http://lbs.amap.com/ 本次使用的是高德的javascript API http://lb ...

  9. 关于高德地图Android开发时地图只显示一次、第二次打开不定位的解决办法

    我按照高德官方Demo改的 第一次是可以定位的,如左图 第二次就不能定位了,如右图 在onDestory中把aMap置为空即可 aMap = null; 修改完如下图: 原理是第二次打开时aMap不为 ...

随机推荐

  1. getStyle(obj, attr)兼容获取css

    设置元素(element)的css属性值可以用element的style属性,dom.style.attr  这样或取得到的值大多数是undefined:何解? dom.style.attr  是用来 ...

  2. Swift

    1.Swift项目与OC项目的区别 - Swift的类文件是以 .swift 结尾 - main.m 不见了,程序入口以 `@UIApplicationMain` - Swift中,代码都是写到 `{ ...

  3. EditPlus 3.7.1186 中文版(10月27日更新)重大性能改进,推荐更新!

    3.7.* 版的 EditPlus 存在性能问题:加载行数比较多的文档时,要等很长的时间.加载一个十几兆的文本文件,可能需要等十几秒.在编辑窗口内翻页也会有明显的迟滞感.而此前的 3.6 版本并非如此 ...

  4. Application Pool

  5. Asp.net mvc 添加Jquery UI

    1.使用NuGet下载jquery ui Install-Package jQuery.UI.Combined 2.下载多语言文件: development-bundle/i18n目录下是jquery ...

  6. 笔记--mysql rpm 安装

    1.rpm包下载 http://taokey.blog.51cto.com/4633273/1630561

  7. QT常见数据类型操作

    平常使用QStringList,都是通过at()访问其中的元素,然后试图也通过它修改元素,编译器报错,原来要使用下标访问修改: //accessRecList.at(3)=strSimilarity; ...

  8. Python—sqlalchemy

    SQLAlchemy SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作. #Dialect用于和数据API进行交流,根据配置文 ...

  9. mysql 修改密码

    安装完成后,默认本地登录超级管理员root,密码为空连接服务后(先停止服务,在wamp中运行mysql控制台enterpass:直接回车),执行set password for root@localh ...

  10. mysql 删除时候有外键提示问题解决

    在直接调用delete 语句的时候,如果出现了外键错误提示的时候,可以考虑用下面的语句执行. 原理是去除外键提示,先用外键约束,再取消外键约束即可 SET FOREIGN_KEY_CHECKS=1;D ...