高德地图开发

最新推荐文章于 2022-09-06 16:10:51 发布

JiuShanCunMonkeyKing

最新推荐文章于 2022-09-06 16:10:51 发布

阅读量817

点赞数

分类专栏： js 工具类文章标签：高德

工具类同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

原文出自点击打开链接 https://blog.csdn.net/pan12321/article/details/64130530

一.申请key（略）

二.创建地图

1. 显示地图

1）显示以某点为中心的地图

    var map = new AMap.Map('container', {  
                        resizeEnable: true,
                     zoom:11,
                      center: [116.397428, 39.90923]       //地点的坐标
                    });

2）加载地图javascript api

a. 从页面直接引入：

            <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script> 
            （使用htmls方式加载地图）
            <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

b 异步加载javascript api

 <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&callback=init"></script>
    <script>
    function init(){
       var map = new AMap.Map('container', {
      //注意  container为选定的div显示容器  这限制了地图的区域
        center: [117.000923, 36.675807],
        zoom: 6
    });
    map.plugin(["AMap.ToolBar"], function() {
        map.addControl(new AMap.ToolBar());
    });
    }

2. 个性化展示

#### 1）设置地图样式
地图样式类型有四种：normal：默认样式 dark：深色样式 blue_night:夜深色样式 fresh：浅色样式 light:osm清新风格样式
可以通过setMapStyle()来设置。
#### 2. 设置地图显示内容
地图显示内容有四种：bg:地图背景 point:兴趣点 road: 道路 building:建筑物
可以通过map.setFeatures(“road”,“point”);设置,可以多个种类要素一起显示

3.地图控件

    工具条：ToolBar继承了缩放，平移，定位等功能按钮在内的组合控件
    比例尺：Scale展示了地图在当前层级与纬度下的比例尺
    定位：Geolocation 用来获取和展示用户主机所在的经纬度位置
    鹰眼：OverView 在地图右下角显示地图的缩略图
    类别切换：Maptype 默认图层与卫星图，实施交通图层之间切换的控
    var map = new AMap.Map('container',{
            zoom: 10,
            center: [116.39,39.9]
    }); 
    AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView'],
      function(){
            map.addControl(new AMap.ToolBar());
            map.addControl(new AMap.Scale());
            map.addControl(new AMap.OverView({isOpen:true}));
        });

4. 室内地图

 1） 参数：  
   hideFloorBar：是否显示楼层切换控件，默认是false  
   opacity:图层透明度[0-1]
   zindex：图层叠加的顺序值，0为最低，默认为1
   cursor：指定鼠标停在店铺面时，鼠标的样式
   alwaysShow:默认为false 默认情况下室内图仅在有矢量底图的时候显示
 2）使用默认的室内地图：
   由于API已经自带矢量地图，因此只要使用默认的就可以了。
   var map = new AMap.Map('mapDiv', {
          resizeEnable: true,
          center:[116.519942, 39.924677],
          zoom:18
        });
  如果需要对室内图做进一步的设定的话，可以在地图indoor_create事件触发之后获取到这个默认的室内地图对象,然后进行需要的操作：   
    map.on('indoor_create',function(){
          map.indoorMap.showIndoorMap('B000A856LJ',5);
    })

三.在地图上绘制

      覆盖物：Marker和信息窗体
      图层：
    默认图层    TileLayer   默认样式的图层，不使用layers属性的时候无需设置
    实时交通    TileLayer.Traffic   用来展示实时路况，可设定刷新频率等
    卫星  TileLayer.Satellite     用来展示卫星影像图层
    路网  TileLayer.RoadNet   用来展示交通网络，通常与卫星图层叠加使用
    3D楼块    Buildings   展示三维效果的建筑物楼块
    可以通过两种方式设置
    1）地图初始化时加载
    var defaultLayer = new AMap.TileLayer();
    var traffic = new AMap.TileLayer.Traffic();
    var map = new AMap.Map('container',{
            zoom: 10,
            layers: [ defaultLayer,//默认图层
                         traffic],  //实时交通图层
            center: [116.39,39.9]
    });
    2)在地图初始后，通过调用setMap(map)将图层添加到地图上，不需要的时候也可以通过SetMap来移除图层 
           var defaultLayer = new AMap.TileLayer();
            var traffic = new AMap.TileLayer.Traffic();
            var map = new AMap.Map('container',{
                zoom: 10,
                center: [116.39,39.9]
            });
          traffic.setMap(map);

附上自己写的例子

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!doctype html>
<html lang="en">
<head>

<base href="//webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/" />
<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: 100%;
margin: 0px;
font-size: 12px;
}
.panel {
color: #333;
padding: 6px;
border: 1px solid silver;
box-shadow: 3px 4px 3px 0px silver;
position: absolute;
background-color: #eee;
top: 10px;
right: 10px;
border-radius: 5px;
overflow: hidden;
line-height: 20px;
}
#input{
width: 250px;
height: 25px;
}
</style>
<title>地理编码</title>

</head>
<body class="no-overflow">
<div id="container" tabindex="0"></div>
<div class ='panel'>
输入地址显示位置:</br>
<input id = 'input' value = '${searchName}'></input>
<div id = 'message'></div>
<a href="javascript:void(0); " οnclick="searchByStationName()">查询</a>
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=${key}"></script>

<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">

var geocoder;

var marker;

//初始点

var map = new AMap.Map('container',{
resizeEnable: true,
zoom: 14,
scrollWheel: false,
center: [120.130429,30.259284]
});
AMap.plugin('AMap.Geocoder',function(){
geocoder = new AMap.Geocoder({
// city: "010"//城市，默认：“全国”

});

//选点

marker = new AMap.Marker({
map:map,
bubble:true
});

});

function searchByStationName(){
var input = document.getElementById('input');
var address = input.value;
geocoder.getLocation(address,function(status,result){
if(status=='complete'&&result.geocodes.length){

marker.setMap(null);

//重新选点

marker = new AMap.Marker({
map:map,
bubble:true
});
marker.setPosition(result.geocodes[0].location);
map.setCenter(marker.getPosition());
document.getElementById('message').innerHTML = result.geocodes[0].location
splits = result.geocodes[0].location;
parent_set(splits.lat,splits.lng);
}else{
document.getElementById('message').innerHTML = '获取位置失败'
}
})
}
//给新点赋值坐标
function parent_set(latY,lngX){
window.parent.document.getElementById("lat").value = latY;
window.parent.document.getElementById("lng").value = lngX;
move();

}

//点移动方法

JiuShanCunMonkeyKing

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
高德地图开发

原文出自点击打开链接 https://blog.csdn.net/pan12321/article/details/64130530一.申请key（略）二.创建地图1. 显示地图1）显示以某点为中心的地图 var map = new AMap.Map('container', { resizeEnable: true, ...
复制链接

扫一扫