如何将高德地图直接用到html中

Posted 2023-03-25

将高德地图用到html中步骤：

1、页面引入API：

1<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

2、html：

1<div id="container" style="width:500px; height:300px"></div>

3、JS代码：

1234var map = new AMap.Map('container',    zoom: 10,    center: [116.39,39.9]);

HTML5怎么用高德地图API返回当前位置的经纬度：

1、当手机采集的地理位置（经纬度）发生改变时在界面上显示出改变后的经纬度。

2、如果开发过android原生定位程序的开发者应该对这部分代码不陌生，中规中矩，先注册位置监听服务，然后当位置发生改变后出发onLocationChanged()方法。

3、现在请在官网上下载示例代码，导入工程后开启包com.amap.cn.apis.location中的MyLocation.java文件，该文件实现的主要功能是：初始化地图并且实现首次定位，地图会自动移动到定位点，我们一会便要基于这个文件来完成地图自动实时定位的功能。

参考技术A

参考技术B

页面引入API：

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

html：

<div id="container" style="width:500px; height:300px"></div>

JS代码：

var map = new AMap.Map('container',
    zoom: 10,
    center: [116.39,39.9]
);

参考技术C

不需要导入js文件

href："http://uri.amap.com/navigation?from=" + gdmaplat + "," + gdmaplon + ",当前位置&to=" + gdlngds + "," + gdlatds + ",站点&mode=car&src=公司名称&callnative=1"

gdmaplat和gdmaplon为传进来的经纬度。gdlngds和gdlatds为目标地点的经纬度。（需要传入这四个参数）

参考技术D 去高德下载接口文件，按照其说明写代码就行了，很简单的

ios开发--高德地图SDK使用简介

高德LBS开放平台将高德最专业的定位、地图、搜索、导航等能力，以API、SDK等形式向广大开发者免费开放。本章节我们来简单学习一下如何使用它的定位及地图SDK。

一、相关框架及环境配置

• 地图SDK

对于如何下载SDK，它的官方文档提供了很详细的说明，使用CocoaPods。如果你没有安装CocoaPods，也可以在它的官网直接下载。

接下来只需要将SDK引入工程，完成相关的环境配置即可。在它的官方文档中有详细说明，这里就不重复了。

地图SDK文档

• 定位SDK

高德 iOS 定位 SDK 提供了不依赖于地图定位的定位功能，开发者可以无地图显示的场景中便捷地为应用程序添加定位功能。它的定位 SDK中提供的持续定位功能与地图功能分离。同样我们先下载SDK。

由于定位与地图是不同的SDK所以一定要记得设置两次用户Key。

另外需要特别注意的是，在官方文档中对于 TARGETS-Build Settings-Architectures的环境配置，在定位和地图SDK是不同的，但是大家只要设置其中一个就可以了。

定位SDK文档

二、示例代码

• 引入相关框架，并完成环境配置

在它的官方文档中对于需要什么样的框架有详细的说明，大家根据文档添加。

最后根据文档我们需要设置info.plist文件。

• 在AppDelegate.m文件中完成apiKey的设置

1. #import <MAMapKit/MAMapKit.h>//地图SDK头文件
2. #import <AMapLocationKit/AMapLocationKit.h>//定位SDK头文件

1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
2. [MAMapServices sharedServices].apiKey = @"990c9f469d381bd72a6915b3d0c829a5";//地图SDK
3. [AMapLocationServices sharedServices].apiKey [email protected]"990c9f469d381bd72a6915b3d0c829a5";//定位SDK
4. return YES;
5. }

• 在viewController.m文件中引入所需属性，并完成懒加载

1. #import <MAMapKit/MAMapKit.h>
2. #import <AMapLocationKit/AMapLocationKit.h>

1. @interface ViewController ()<MAMapViewDelegate,AMapLocationManagerDelegate>
2. @property (nonatomic, strong) MAMapView *mapView;//地图视图
3. @property (nonatomic, strong) AMapLocationManager *locationManager;//定位管理者
4. @end

1. - (MAMapView *)mapView{
2. if (!_mapView) {
3. _mapView = [[MAMapView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), CGRectGetHeight(self.view.bounds))];
4. _mapView.delegate = self;
5. _mapView.mapType = MAMapTypeStandard;//设置地图类型
6. _mapView.showTraffic= YES;//是否显示交通图
7. [self.locationManager startUpdatingLocation];//开始定位
8. [_mapView setUserTrackingMode: MAUserTrackingModeFollow animated:YES];//定位以后改变地图的图层显示。
9. [self.view addSubview:_mapView];
10. }
11. return _mapView;
12. }
13. - (AMapLocationManager *)locationManager{
14. if (!_locationManager) {
15. _locationManager = [[AMapLocationManager alloc] init];
16. _locationManager.delegate = self;
17. }
18. return _locationManager;
19. }
20. - (void)viewDidLoad {
21. [super viewDidLoad];
22. [self locationManager];
23. [self mapView];
24. }

• 完成定位和“大头针”功能

1. //AMapLocationManager代理方法位置更新以后回调。
2. - (void)amapLocationManager:(AMapLocationManager *)manager didUpdateLocation:(CLLocation *)location
3. {
4. NSLog(@"location:{lat:%f; lon:%f; accuracy:%f}", location.coordinate.latitude, location.coordinate.longitude, location.horizontalAccuracy);
5. }
6. -(void) viewDidAppear:(BOOL)animated
7. {
8. [super viewDidAppear:animated];
9. MAPointAnnotation *pointAnnotation = [[MAPointAnnotation alloc] init];
10. pointAnnotation.coordinate = CLLocationCoordinate2DMake(31.982527, 118.735046);
11. pointAnnotation.title = @"宏创科技";
12. pointAnnotation.subtitle = @"国家广告产业园XXX";
13. [self.mapView addAnnotation:pointAnnotation];
14. }
15. //MAMapView代理方法，用来设置大头针
16. - (MAAnnotationView *)mapView:(MAMapView *)mapView viewForAnnotation:(id )annotation
17. {
18. if ([annotation isKindOfClass:[MAPointAnnotation class]])
19. {
20. static NSString *pointReuseIndentifier = @"pointReuseIndentifier";
21. MAPinAnnotationView*annotationView = (MAPinAnnotationView*)[mapView dequeueReusableAnnotationViewWithIdentifier:pointReuseIndentifier];
22. if (annotationView == nil)
23. {
24. annotationView = [[MAPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:pointReuseIndentifier];
25. }
26. annotationView.canShowCallout= YES; //设置气泡可以弹出，默认为NO
27. annotationView.animatesDrop = YES; //设置标注动画显示，默认为NO
28. annotationView.draggable = YES; //设置标注可以拖动，默认为NO
29. annotationView.pinColor = MAPinAnnotationColorPurple;
30. return annotationView;
31. }
32. return nil;
33. }