zoukankan      html  css  js  c++  java
  • 高德地图jsapi调用

    今天公司项目要做一个基于地图的位置展示,在网上找了下,发现高德地图开放api能满足功能,现对其应用做一下简单的记录。

    1.首先在高德开发平台上注册,简单填写相关信息后,可以获得key,拿到key后可以调用高德地图api的相关接口。

    2.在调用api的相关页面引入高德api,eg:

    <script type="text/javascript"
    src="http://webapi.amap.com/maps?v=1.3&key=youKey">
    </script>

    3.根据初始位置创建地图实例,eg:

    var position = new AMap.LngLat(x, y);
    //创建地图实例
    mapObj = new AMap.Map("container", {
    view : new AMap.View2D({//创建地图二维视口
    center : position,//创建中心点坐标
    zoom : 10, //设置地图缩放级别
    rotation : 0
    //设置地图旋转角度
    }),
    lang : "zh_cn"//设置地图语言类型,默认:中文简体
    });

    4.在页面上进行初始化,一般在body上eg:

    <body onload="initialize('121.476753','31.224349')">

    地图显示位置在div中定义:

    <div id="container" style="85%; height:500px;margin:0;"></div>

    需要说明的是,显示位置放在table中会有显示不出来的问题,推荐放在div中进行位置改变。

    5.在地图特定位置显示信息,eg:

    var info = [];
    info.push("<div><div><img width='67px' height='16px' style="float:left;" src="${ctx}/images/main/logo.png "/></div> ");
    info.push("<div style="padding:0px 0px 0px 4px;"><b>上海北斗</b>");
    info.push("x坐标:"+x);
    info.push("y坐标:"+y);
    info.push("地址 : 上海市虹口区欧阳路法兰桥创意园196号</div></div>");
    infoWindow = new AMap.InfoWindow({
    content:info.join("<br/>") //使用默认信息窗体框样式,显示信息内容
    });
    infoWindow.open(mapObj,new AMap.LngLat(x,y));

    6.自定义图标点图标

    //创建点图标
    var marker = new AMap.Marker({
    icon:"http://webapi.amap.com/images/marker_sprite.png",
    position:new AMap.LngLat(x,y),
    offset:new AMap.Pixel(-26,-13),
    autoRotation:true
    });
    marker.setMap(mapObj); //在地图上添加点

    7.上面是一些简单的api调用,详细的高德开放平台都有提供相应的api,可具体情况具体对待。

  • 相关阅读:
    Unity给力插件之MegaFiers
    序列化存档之备忘脚本
    09 Spring Cloud的集群保护框架Hystrix
    08 在Spring Cloud中使用Feign
    07 REST客户端
    06 RestTemplate负载均衡
    05 第一个Ribbon程序
    04 Ribbon介绍
    01 在IDEA的同一目录下创建多个项目
    03 Eureka集群的搭建
  • 原文地址:https://www.cnblogs.com/yanghuiping/p/4092392.html
Copyright © 2011-2022 走看看