关于运用高德地图api,并在api上显示标注的小应用

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>自定义点标记图标</title>
<link rel="stylesheet" type="text/css" href="http://developer.amap.com/Public/css/demo.Default.css" />
<!-- 这里的key值需要到http://lbs.amap.com/api/javascript-api/summary-3/这个网址里申请,在左下角的为位置-->
<script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=你申请的key值"></script>
<script language="javascript">
var mapObj,marker;
//初始化地图对象,加载地图
function mapInit(){
    mapObj = new AMap.Map("iCenter",{
        //二维地图显示视口
        view: new AMap.View2D({
            center:new AMap.LngLat(116.397428,39.90923),//地图中心点
            zoom:4 //地图显示的缩放级别
        })
    });
    //添加点标记,并使用自己的icon
    addMarker1();
    addMarker2();
}

//在地图上添加点标记函数
function addMarker1(){
    marker=new AMap.Marker({
    icon:new AMap.Icon({    //复杂图标
            size:new AMap.Size(25,25),//图标大小
            image:"chinaz12.png", //大图地址
            imageOffset:new AMap.Pixel(0,0)//相对于大图的取图位置
        }),
    position:new AMap.LngLat(116.405467,39.907761)
    });
    marker.setMap(mapObj);  //在地图上添加点
    //信息载体
    var info = [];
    info.push("<b>  高德软件</b>");
    info.push("  电话 :  010-84107000   邮编 : 100102");
    info.push("  地址 : 北京市望京阜通东大街方恒国际中心A座16层");                 

    var inforWindow = new AMap.InfoWindow({
      offset:new AMap.Pixel(0,-25),
      content:info.join("<br>")
    });  

    //监听事件
    AMap.event.addListener(marker,"click",function(e){
      inforWindow.open(mapObj,new AMap.LngLat(116.405467,39.907761));
    });
}

//在地图上添加点标记函数
function addMarker2(){
    marker=new AMap.Marker({
    icon:new AMap.Icon({    //复杂图标
            size:new AMap.Size(25,25),//图标大小
            image:"chinaz12.png", //大图地址
            imageOffset:new AMap.Pixel(0,0)//相对于大图的取图位置
        }),
    position:new AMap.LngLat(120.343234,30.31162)
    });
    marker.setMap(mapObj);  //在地图上添加点
    //信息载体
    var info = [];
    info.push("<b>  杭州电子科技大学</b>");
    info.push("  电话 :  010-84107000   邮编 : 100102");
    info.push("  地址 : 北京市望京阜通东大街方恒国际中心A座16层");                 

    var inforWindow = new AMap.InfoWindow({
      offset:new AMap.Pixel(0,-25),
      content:info.join("<br>")
    });  

    //监听事件
    AMap.event.addListener(marker,"click",function(e){
      inforWindow.open(mapObj,new AMap.LngLat(120.343234,30.31162));
    });
}

</script>
</head>
<body onLoad="mapInit()">
    <div id="iCenter"></div>
</body>
</html>

时间: 2024-11-03 10:59:21

关于运用高德地图api,并在api上显示标注的小应用的相关文章

利用高德地图官方提供的API实现模拟定位的功能

使用高德地图API需要申请一个开发者ID号以及我所用的相关资源:  http://pan.baidu.com/disk/home?fr=ibaidu 该文件夹中有一个官方文档,AMap_IOS_API_Guid,提供了使用方法供开发者参阅. 利用高德地图官方提供的API实现模拟定位的功能,布布扣,bubuko.com

高德地图车机版API演示程序

高德地图车机版API演示程序 做车载的应该和这个程序打交道打的比较多吧,这里是我今天写的一个实现了他的API的一个演示程序 首先我们来看下他的官网. http://lbs.amap.com/api/amapauto/#id004 相对于其他的api来说,这个api已经相对挺完善的,如果想使用这个车机版地图,你需要去下载一些资源包,放在对应的位置然后联网激活,这些就不详细的说明了 概述 高德地图车机版(amap auto)第三方调用API是为整车厂.前后装主机厂.系统方案商.开发者等,提供的在自己

iOS高德地图让指定区域或者点显示在屏幕中间

对于高德地图也是一个新手,很多功能看文档,问技术 或者高德群里讨论  群号:204668425 在我们需求中绘制的有 圆 折线 不规则图形 方式,打开地图指定的绘制图形置于屏幕中间 1.首先创建一个数组--  arraySpace 圆: 需要根据圆的半径 中心点计算 垂直的四个 //加入所有圆的点 //设置位置的点 CLLocationCoordinate2D destinationCoordinated =CLLocationCoordinate2DMake(latitude,longitud

【python】获取高德地图省市区县列表

项目中需要用省市区来进行检索,原想高德地图肯定会有API来获得这些数据,结果没有找到,有一个接口好像可以用,但是会附带大量的边界坐标点. 所以就不如自己把高德的省市区列表扒下来,自己写接口来完成这个功能. 看到高德地图的js的demo里面有这样的展示页面:http://lbs.amap.com/api/javascript-api/example/u/2001-2/,所以我就直接利用它来分析. 1. 省列表 省的列表是直接写死在这个界面里的,所以我也照搬,把省都直接写死: provinceLis

OpenERP|ODOO高德地图应用

发布时间:2015-04-06 11:01:37来源:http://www.chinamaker.net 在openerp中的fleet模块,每一个车辆都有地图应用.默认采用的是谷歌地图,但是在应用得时候如果想换其他的地图该怎么做那?以下我们以国内市 面上比较流行的高德地图为例,给大家分析一下如何换地图. 一,openerp的地图设计思路 openerp的地图应用是运用qweb来实现的.在xml中声明一个div,然后在js中初始化地图放到声明的div里即可.在js中会把这一系列的初 始化地图,加

【高德地图】逆地址解析 设置和应用

最近自己做了一个小程序,引用了高德地图的逆地址解析API,在此就相关设置和具体应用整理一下: 所谓的逆地址解析:通过经纬度解析出对应的位置. 第一步:要是用API 首先要申请key,页面展示如下: 1.输入key的名称 (起一个名字,便于识别,开发中没用到) 2.我选择的是浏览器 3.点击提交就会生成一个类似GCCBZ-7NMW6-HMOSD-EVWW3-WBN3Z-4XBLZ这样的密钥,请求时,赋值给key 第二步:查看高德地图API说明文档 请求示例:   response示例: 注意: 可

如何实现在H5里调起高德地图APP

点标记位置展示 通常我们都使用Marker点来进行位置的标定,所以JSAPI在Marker类中提供了markOnAMAP的方法,这个方法接受一个JSON对象参数,参数对象包含position和name两个属性,调起之后将在高德地图客户端或者Web站点标记显示对应的Marker点,基于marker点的展示,用户可以接着使用周边搜索.路线规划和导航等功能.扫描右侧二维码,点击地图中见的marker点查看移动端调起来效果. 核心代码: var marker = new AMap.Marker({   

如何实现在H5里调起高德地图APP?(上)

这一篇文章,将讲述如何在H5里调起高德地图APP,并展示兴趣点.适合于展示某个餐馆,商场等,让用户自行选择前往方式. 场景一.在高德地图上展示Marker点或者POI标记 在一些基于位置分享的应用开发中,我们会在地图上标记marker点或者使用地图上的poi点,这时候如果能在高德地图客户端展示这个位置的话,用户就可以使用导航或者路线规划等功能前往指定地点,起到引导用户前往的作用,因此JSAPI提供的调起高德地图并显示点标记或者poi点的功能,以满足此类需求. 点标记位置展示 通常我们都使用Mar

【API】高德地图API JS实现获取坐标和回显点标记

1.搜索+选择+获取经纬度和详细地址 2.回显数据并点标记 3.实现 第一步:引入资源文件 <!--引入高德地图JSAPI --><script src="//webapi.amap.com/maps?v=1.3&key=在官网申请一个key"></script><!--引入UI组件库(1.0版本) --><script src="//webapi.amap.com/ui/1.0/main.js">