高德地图api调用demo_web端高德地图javascript API的调用

本文详细介绍了如何在web端调用高德地图JavaScript API,包括注册获取key、引入API、创建地图容器、设置地图、常用地图操作如搜索地点、添加标记、缩放比例尺、地图类型转换等。还涵盖了地图控件的添加与删除,以及关键字搜索、输入提示等功能的实现方法。
摘要由CSDN通过智能技术生成

【转载https://www.cnblogs.com/zimuzimu/p/6202244.html】web端高德地图javascript API的调用

关于第三放地图的使用,腾讯、百度、高德

具体怎么选择看你自己怎么选择了。

使用方法

1.注册成为高德地图开发者,创建应用后申请key。

2.引入高德地图API

3.创建地图容器

4.创建默认地图

方式一

var map = new AMap.Map('container');

map.setZoom(10); //setzoom 指定缩放级别

map.setCenter([116.39,39.9]); //指定地图中心

方式二

var map = new AMap.Map('container',{

zoom: 10,

center: [116.39,39.9]//new AMap.LngLat(116.39,39.9)

});

现在地图就出来

常用的地图操作:

搜索地点

添加标记

缩放比例尺空间

地图类型转换

路线指定

添加标记

marker = new AMap.Marker({

position: [116.39, 39.9], //标记的地图坐标

map: map

});

如果是多个地点标记可以使用数组。遍历循环标记

点标注可以添加参数 自定义图标

清楚标记

marker.setMap();

控件的添加

控件的种类

添加方式

1 AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType'], function() {

2 toolBar = new AMap.ToolBar(); //工具条

3 scale = new AMap.Scale(); //比例尺

4 mapType = new AMap.MapType(); //地图种类

5 map.addControl(toolBar);

6 map.addControl(scale);

7 map.addControl(mapType);

8 })

删除控件

map.removeControl(toolBar);

地图搜索

关键字搜索插件提供某一特定地区的兴趣点位置查询服务。允许设置搜索城市、搜索数据类别、搜索结果详略、搜索结果排序规则等。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败,系统将返回错误信息。

使用插件之前,需要使用AMap.service方法加载插件,然后在回调函数中可以进行服务的设定和查询:

关键字搜索插件以及公交换乘插件(AMap.Transfer)、驾车(AMap.Driving)步行(AMap.Walking)路径规划插件、云图插件(AMap.CloudDataSearch)都有两种使用方式:

第一种,在构造函数里传入map或panel参数,或两者都传入。map为AMap.Map实例,panel为div元素或其id号。一旦传入,api会自动为用户生成交互面板和地图展示。用户自己控制div的显示位置及大小,api生成的交互面板和地图展示的皮肤格调可以通过修改样式来实现,样式名可以通过浏览器的调试工具查看。实际上,面板的生成及地图展示是用独立的渲染插件实现的,用户可以把渲染插件下载下来任意修改默认皮肤的样式及结构。代码示例:

var placeSearch = new AMap.PlaceSearch({ //构造地点查询类

pageSize: 5,

pageIndex: 1,

city: "010", //城市

map: map,

panel: "result"

});

//关键字查询

placeSearch.search('方恒', function(status, result) {

});

第二种,直接使用服务返回的数据,构造的option中不写map和panel属性,在search方法中传入回调函数,如:

var placeSearch = new AMap.PlaceSearch({ //构造地点查询类

pageSize: 5,

pageIndex: 1,

city: "010"//城市

});

//关键字查询

placeSearch.search('方恒', function(status, result) {

//TODO:开发者使用result自己创建交互面板和地图展示 result返回的一组包含地点信息的对象

});

输入提示

AMap.Autocomplete根据输入关键字提示匹配信息,“输入提示”经常和“地点搜索”配合使用,允许用户根据输入提示匹配结果,进行相关POI搜索。您可以根据“输入提示”匹配信息,将Poi类型和城市作为输入提示和限制条件,并自定义回调函数来显示查询到的结果。当请求查询失败后,系统会返回错误信息。在使用插件之前,需要使用AMap.plugin方法加载插件,然后在回调函数中可以进行服务的设定和查询:

输入提示与POI搜索结合

通常联想输入提示与POI搜索结合使用,直接显示出搜索结果。

AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){

var autoOptions = {

city: "北京", //城市,默认全国

input: "input"//使用联想输入的input的id

};

autocomplete= new AMap.Autocomplete(autoOptions);

var placeSearch = new AMap.PlaceSearch({

city:'北京',

map:map

});

AMap.event.addListener(autocomplete, "select", function(e){

//TODO 针对选中的poi实现自己的功能

placeSearch.search(e.poi.name)

});

});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值