2. 程式人生 > >高德地圖一分鐘入門

高德地圖一分鐘入門

阿新 • • 發佈：2019-01-27

高德地圖之Hello World~

首先去官網獲取一個key

這裡寫圖片描述

進入控制檯建立一個新的應用

這裡寫圖片描述

填寫資料

這裡寫圖片描述

新增一個新key

這裡寫圖片描述

選擇key的型別 這裡用的是web端的key

這裡寫圖片描述

這樣key就生成好了 把key複製一下

這裡寫圖片描述

然後建立一個html 把上面拿到的key貼上過來

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta
 
 name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>基本地圖展示</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src
 
="https://webapi.amap.com/maps?v=1.4.8&key=**替換你的key**"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>

<script>
    var map = new AMap.Map('container', {
        resizeEnable: true
 
,
        zoom:11,
        center: [116.397428, 39.90923]
    });

</script>
</body>
</html>

地圖就建立好了

這裡寫圖片描述

可以自定義地圖樣式 從控制檯進入

這裡寫圖片描述

做好修改之後點擊發布

這裡寫圖片描述

釋出成功會有個彈出框

這裡寫圖片描述

把釋出的樣式連結複製

這裡寫圖片描述

在建立地圖的時候新增樣式

var map = new AMap.Map('container', {
        mapStyle:"amap://styles/******",
        resizeEnable: true,
        zoom:11,
        center: [116.397428, 39.90923]
    });

完成~

這裡寫圖片描述

相關推薦

高德地圖一分鐘入門

高德地圖之Hello World~ 首先去官網獲取一個key 進入控制檯建立一個新的應用 填寫資料 新增一個新key 選擇key的型別 這裡用的是web端的key 這樣key就生成好了 把key複製一下 然後建立一個ht

高德地圖 一 SHA 1 值的獲取和sdk的整合

一直沒有接觸過地圖的開發 需求 最近沒什麼專案 就自己研究研究 以防以後 用到。這次就把自己的學習過程給 全部記錄下來，包括過程中遇到的 錯誤問題，也有記錄。首先從第一步開始，到高德開放平臺，註冊並且

高德地圖和canvas畫圖結合應用的一些感想(一)

記錄 src function lose poi pan 高德 工程師 根據地 　　之前朋友委托有個創業項目，想讓我幫忙，正好那段時間有點閑，半推半就中就答應下來了。 　　入了團隊才發現，該項目前後端分離，後端工程師已就位主要實現接口，IOS端工程師也已就位，還差一個web

高德地圖JS開發之入門

1.高德地圖JavaScript API引入： 方式1：頁面直接引入 <script type="text/javascript"src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值"></script&g

（一）高德地圖之基本屬性以及顯示模式

       我們在開發中常常會用到地圖功能，那麼我們最常用的就是百度地圖和高德地圖了，今天我們就來看一下高德地圖怎麼用，我個人認為高德地圖封裝的還是比較好的，使用起來方便快捷。 首先我們需要到高德開發者平臺註冊賬號，根據API進行操作即可，高德開放平

記一次使用高德地圖遇到的bug

專案中集成了高德地圖，之前測試都是好好的，突然出現地圖不能用的情況，而且是三星手機可用，華為 小米手機存在問題。斷點除錯後發現 mMapView.getMap() 返回的 aMap 為null，跟進程式碼 public AMap getMap() { IMapFragmentDele

高德地圖開發(一)詳細配置步驟實現顯示簡單地圖

建立專案根據專案的包名和SHA1值去高德地圖平臺申請key值 包名  :  在build.gradle裡面或者AndroidManifest.xml裡面都能獲取到 SHA1值  :  參考:https://blo

高德地圖 js api（一）載入

      1.data中定義key和回撥函式 data() { return { amapKey: this.$global.key, map:null,

關於高德地圖api的使用（一）

最近筆者的專案打算新增周邊服務的模組，因此嘗試使用了高德地圖。 先上預覽圖，開啟的時候會自動定位（這裡是使用了瀏覽器ip定位，pc端可能不準）。隨意點選會生成一個藍色的標記，並且自動搜尋附近的美食服務。 初始定位（瀏覽器ip定位） AMap.plugin('AMap

ios 一步一步學會自定義地圖吹出框(CalloutView)-->(百度地圖，高德地圖,google地圖)

前言 在ios上邊使用地相簿的同學肯定遇到過這樣的問題：吹出框只能設定title和subtitle和左右的view，不管是百度地圖還是高德地圖還是自帶的google地圖，只提供了這四個屬性，如果想新增更多的view，只能自定義。可是，類庫只能看到.h檔案，.m都看不

ios 一步一步學會自定義地圖吹出框(CalloutView)-->(百度地圖，高德地圖,google地圖)...

前言 在ios上邊使用地相簿的同學肯定遇到過這樣的問題：吹出框只能設定title和subtitle和左右的view，不管是百度地圖還是高德地圖還是自帶的google地圖，只提供了這四個屬性，如果想新增更多的view，只能自定義。可是，類庫只能看到.h檔案，.m都看不到

高德地圖心得（一）—定位與移動（Maker處於地圖中心）

摘要：從事android開發已有一年多，做了不少有關地圖開發的專案。遇到的坑也很多（官方demo畢竟只是參考，不一定是最簡潔的），下面就用程式碼展示我認為最簡潔的核心功能點，這也是我第一篇部落格，希望對你們能有些幫助！ //地圖定位,使自定位Maker處於地圖中心

ANDROID專案中嵌入高德地圖（一）配置環境+顯示地圖

最近在做專案中嵌入高德地圖的工作，覺得有必要記錄一下嵌入過程，雖然高德官方給說明文件了，但有寫並不明確需要去查類，查資料，再此把過程記錄一下。 一、顯示地圖 1.配置AndroidManifest.xml檔案 可能需要如下許可權： <!--允許程式開啟網路套接字-

高德地圖元件在Android的應用以及Android與JavaScript的互動(一)

最近在慕課網學習了關於高德地圖元件的課程（其實就是一個廣告，內容和官網的API完全一樣），發現這個JavaScript API比Android API簡單方便多了，於是就打算放在Android APP上來實現，花了一點小功夫，但是最終還是實現了，後來打算擴充套件

一頁程式碼實現高德地圖顯示自己定位，以及Marker標記點顯示（文末有福利哦）

import android.Manifest; import android.content.pm.PackageManager; import android.location.Location; import android.os.Bundle; import andr

iOS － 高德地圖API簡單開發（一）

最近看了看高德地圖的開發平臺以及它們的API，奇怪的是一直沒找到語音API，這個問題放到以後再說吧。 對於高德地圖的開發平臺，它們提供的說明文件還算健全，而且由於API是國人開發的，所以所有介面都有中文的介面說明，很是容易理解。只不過，在載入它們的第三方庫時，總是一個功能一

高德地圖Web端JavaScript API開發(一)---地圖基礎控制元件

在地圖上新增一些基礎的地圖控制元件。 JavaScript API提供了工具條、比例尺、定位、鷹眼、基本圖層切換等常用的控制元件，使用的時候需要通過plugin方法將外掛的功能引入，然後進行控制元件的初始化和新增 var map = new AMap.Map('conta

Android高德地圖步行路徑規劃錯亂的問題解決[問題一]

/** * 新增步行路線到地圖中。 * * @since V2.1.0 */ public void addToMap() { initPolylineOptions(); try { List<WalkStep> walkPaths = walkPat

轉載：高德地圖API學習 從零開始學高德JS API（一）地圖展現

摘要：關於地圖的顯示，我想大家最關心的就是麻點圖，自定義底圖的解決方案了吧。在過去，marker大於500之後，瀏覽器開始逐漸卡死，大家都開始尋找解決方案，比如聚合marker啊，比如麻點圖啊。聚合marker裡面還有一些複雜的演算法，而麻點圖，最讓大家頭疼的，就是如何生成麻點圖，如何切圖，如何把圖片貼到地圖

高德地圖的基礎控制類

complete fit pixel 自定義 道路 ins aps zh-cn agg /** * @fileOverView 高德地圖的基礎控制類 * @author yi.z * @date 2014-02-19 */