高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口，可以通过各种API接口向地图添加内容，创建功能丰富、交互性强的地图应用。高德地图JavaScript API 提供了大量的实用工具和富有特色的插件功能，并提供了搜索和路线规划等服务。
1、首先
2、然后
3、最后就是看官方文档开发
高德地图API使用介绍：http://lbs.amap.com/api/javascript-api/guide-2/map_show/
直接上代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="initial-scale=1.1,user-scalable=no">
6 <title>锦福地图</title>
7 <link rel="shortcut icon" type="image/x-icon" href="img/fav.png" />
8 <link href="css/map.css" rel="stylesheet" type="text/css"/>
9 </head>
10 <body>
11 <div id="map"></div>
12 <div class="search">
13 <input id="City" type="text" />
14 <button id="Ok">搜索</button>
15 </div>
16 <div id="zoomIn" class="zoomIn">放大</div>
17 <div id="zoomOut" class="zoomOut">缩小</div>
18 <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>
19 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=430307684d2fa5fea91a9e6fe00c828d"></script>
20 <script type="text/javascript">
21 $(function(){
22 var map=new AMap.Map("map",{
23 level:12
24 });
25
26 //map.setCity("武汉市"); //设置地图要显示的城市
27
28 //map.getCenter(); //获取当前地图中心点地理坐标
29
30 //放大
31 $("#zoomIn").click(function () {
32 map.zoomIn();
33 });
34
35 //缩小
36 $("#zoomOut").click(function () {
37 map.zoomOut();
38 });
39
40 //搜索城市
41 $("#Ok").click(function () {
42 var city=$("#City").val();
43 map.setCity(city);
44 });
45
46 //地图比例尺
47 map.plugin(["AMap.Scale"],function(){
48 var scale = new AMap.Scale();
49 map.addControl(scale);
50 });
51
52 //加载鹰眼
53 map.plugin(["AMap.OverView"],function(){
54 var view = new AMap.OverView();
55 view.open();
56 map.addControl(view);
57 });
58
59 //地图类型切换
60 map.plugin(["AMap.MapType"],function(){
61 //地图类型切换
62 var type= new AMap.MapType({
63 defaultType:0 //使用2D地图
64 });
65 map.addControl(type);
66 });
67
68 //地图操作工具条
69 map.plugin(["AMap.ToolBar"],function(){
70 //加载工具条
71 var tool = new AMap.ToolBar();
72 map.addControl(tool);
73 });
74
75 map.plugin('AMap.Geolocation', function () {
76 geolocation = new AMap.Geolocation({
77 enableHighAccuracy: true,//是否使用高精度定位，默认:true
78 timeout: 10000, //超过10秒后停止定位，默认：无穷大
79 maximumAge: 0, //定位结果缓存0毫秒，默认：0
80 convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
81 showButton: true, //显示定位按钮，默认：true
82 buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
83 buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
84 showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
85 showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
86 panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
87 zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
88 });
89 map.addControl(geolocation);
90 AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
91 AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
92 });
93
94 //搜索附近餐厅
95 map.plugin(["AMap.PlaceSearch"],function(){ 96
97 var pl = new AMap.PlaceSearch();
98 pl.searchNearBy('餐厅',map.getCenter(),3000);
99
100 AMap.event.addListener(pl,'complete',function(e){
101 console.log(e);
102 });
104 });
105
106 });
107
108 </script>
109 </body>
110 </html>
线上发布版演示：http://2.luofu.sinaapp.com/MyMap/index.html
时间： 2024-11-03 05:39:12