在高德地圖中新增座標點

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

<!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="http://cache.amap.com/lbs/static/main1119.css"/>
    <!--的圖示字型庫-->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style>
        .marker {
            color: #ff6600;
padding: 4px 10px;
border: 1px solid #fff;
white-space: nowrap 
;
font-size: 12px;
background-color: #0066ff;
}
        .amap-icon img{
            display: none;
}
        .icon{
            position: absolute;
top: 0;
left:0;
z-index: 99;
}
        .icon span{
            font-size: 28px;
}

    </style>
    <script src="http://webapi.amap.com/maps?v=1.4.0&key=YourKeyName" 
></script>
    <!--新增縮放條<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>-->
<script src="../js/jquery.min.js"></script><!--引入js檔案-->
</head>
<body>
<div id="container"></div>
<div  class="button-group">
    <input type="button" class="button" value="新增點標記覆蓋物" id="addMarker"/>]
<input type="button" class="button" value="更新點標記覆蓋物" id="updateMarker"/>
    <!--
    <input type="button" class="button" value="刪除點標記覆蓋物" id="clearMarker"/>
    -->
</div>
<script>
    var marker, map = new AMap.Map("container", {
        resizeEnable: true,
center: [112.32, 28.60],//中心點
zoom: 13
});
//新增點
AMap.event.addDomListener(document.getElementById('addMarker'), 'click', function() {
        addMarker();
}, false);
//更新點
AMap.event.addDomListener(document.getElementById('updateMarker'), 'click', function() {
        marker && updateMarker();
}, false);
//刪除點
//    AMap.event.addDomListener(document.getElementById('clearMarker'), 'click', function() {
//        if (marker) {
//            marker.setMap(null);
//            marker = null;
//        }
//    }, false);
    // 例項化點標記
function addMarker() {
      //map.setZoom(19);//設定縮放範圍；引數範圍0-19,0是最大最粗略,19是最小最精確
     // AMap.convertFrom() 將gps座標轉化為高德座標
     //maker新增點
AMap.convertFrom('119.31,58.5953','GPS',function(status, result) {
        console.log(result.locations[0].lng+","+ result.locations[0].lat);
//設定圖示的顏色
$(".amap-icon img").replaceWith("<div class='icon' style='color: #0066ff'><span class='fa fa-map-marker'></span></div>");
marker = new AMap.Marker({
          //icon: "../images/location_fill_blue_20.png",
          // icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position:[result.locations[0].lng, result.locations[0].lat]
        });
marker.setMap(map);
});
}

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

參考連結：

1.gps資料轉高德資料：http://lbs.amap.com/api/javascript-api/reference/lnglat-to-address/#m_AMap.convertFrom

2.高德點標記API：http://lbs.amap.com/api/javascript-api/example/marker/marker-content

3.一套絕佳的圖示字型庫和CSS框架：http://fontawesome.dashgame.com/

4.RGB顏色查詢對照表：http://www.114la.com/other/rgb.htm

在高德地圖中新增座標點

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=e

利用高德地圖通過給定坐標點畫帶箭頭方向的路徑

api size null box tool bapi 說了劃線加載完成這是到新公司以後接到的第一個任務（測試任務），嘿嘿，第一次畫地圖，一開始整個人都方了。。。方過了一個周末，還好兩天差不多就弄出來了。感謝互聯網啊，讓我這種渣渣得以繼續生存，但是也意識到自己編碼能力

（五）高德地圖之新增groundoverlay覆蓋物

本節主要實現的功能是往地圖上新增一個groundoverlay覆蓋物，用此方式可以實現公園電子導遊，下面先來看一張效果圖吧：接下來我們還是直接上程式碼：新建佈局檔案activity_groundoverlay.xml <?xml version="1.0" encod

高德地圖中安卓6.0許可權處理方案

package com.amap.location.demo; import java.util.ArrayList; import java.util.List; import android.Manifest; import android.app.Ac

高德地圖中實現實時定位、駕車路線規劃，點間距

/** * 實現地圖的載入 * @author 木蘭綴露 *對於標記點過多的顯示問題，將定位點的經緯度傳至伺服器的方法內增加減少經緯度，然後好資料庫標記點進行經緯度比對，如果有則載入到前臺，如果沒則擴大載入範圍 */ public class MapActi

判斷一個座標點是否在一個無規則的多邊形內 (iOS定位服務與地圖應用開發：高德地圖開發)

m 之前工作在一家智慧裝置的公司，做過一個親友定位監控系統，類似現在比較流行的360兒童手環。所以這裡簡單介紹定位與地圖。 1 定位服務 iOS裝置提供三種不同定位途徑，蜂窩式行動電話基站定位；WiFi定位，通過查詢一個WiFi路由器的地理位置資訊，比較省電；GPS衛星定

js中實現高德地圖坐標經緯度轉百度地圖坐標

math.sqrt pan poi 結果 mat blog 筆記百度說明 1 function tobdMap(x, y) { 2 var x_pi = 3.14159265358979324 * 3000.0 / 180.0; 3

在React 中使用百度地圖，高德地圖出現'AMap' is not defined 'BMap' is not defined

在React 中使用百度地圖，高德地圖出現'AMap' is not defined 'BMap' is not defined index.html <script type="text/javascript" src="http://api.map.baidu.co

高德地圖02---高德地圖新增覆蓋物

1 新增MarkOption標記 “` MarkerOptions mark = new MarkerOptions(); LatLng lat=new LatLng(39.908127, 116.375257); mark.position(lat); //mark的座標位置

高德地圖01---在activity中展示高德地圖

1 高德官網下載2D地圖開發包並匯入jar包 2 申請key，配置在工程的“AndroidManifest.xml”檔案中 <application android:allowBackup="true" android:icon="@drawabl

百度地圖和高德地圖結合在web中的使用（二）

百度地圖在web中的使用（二）背景：在做一個關於地理位置欄位時，初始位置使用百度地圖獲取時失敗，獲取的位置資訊不準確，奈何產品說友商好使的啊，F12看後是採用的高德，所以在這採用高德地圖獲取初始位置，其他的還是用百度地圖註冊高德，建立例項，獲取key值引入js 高德地圖獲取獲取當前

reactjs中使用高德地圖計算兩個經緯度之間的距離

第一步下載依賴 npm install --save react-amap 第二步,在元件中使用 import React, { Component } from 'react' import { Link } from 'react-router-dom' import { Map

webview中巢狀html實現精準定位（百度地圖、高德地圖、騰訊地圖、H5原生定位）js對比

最近在實現一個功能，就是在安卓手機和蘋果手機嵌入html程式碼，實現精準定位，我為此對比幾種定位的方法。我要的是精準定位，就是誤差在100米左右的功能，類似與外賣app那種定位精確度 1. 首先是原生h5定位 if(browser.versions.an

在React 中使用百度地圖，高德地圖出現'AMap' is not defined 'BMap' is not defined

index.html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script> <scrip

在vue專案中引入高德地圖

1 在index.html檔案中引入js檔案<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key="></script> 2 334 3

Android 高德地圖新增Marker，Marker點選事件

新增圖片圖示 BitmapDescriptor bitmapDescriptor = BitmapDescriptorFactory.fromBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.qidian)); final

關於高德地圖在iOS中呼叫騎行導航

SDK中實時導航時可以進行不同的路線規劃，這塊又跳到各自的路徑規劃頁面，或者串聯不起來。高德給的demo中也沒有騎行導航的相關示例，網上也查不到相關有用的資訊，所以只能自己深入檢視SDK，發現如果想要實現在移動端的騎行導航，步驟如下: 1、獲取起始點和終點的經緯度座標

高德地圖Marker的管理（新增,刪除）

方法一：清除地圖上所有的Marker 說明：這種方式清除marker可能會出現設定了icons模擬gif動畫的marker顯示不了，這時候就需要用第二種方法了。 AMap aMap = mapV

無意中發現了谷歌、騰訊、高德地圖糾偏演算法

非常抱歉，前幾天和業內人士談到糾偏事宜，雖然我這個演算法是把網上一篇java寫的內容翻譯成了C#，但還是不妥，可能帶來不必要的麻煩，在他的建議下，我還是刪除安全一些，有這方面需求的朋友，可以到網上搜一下，有一篇java的演算法，把函式首字母換成成大寫就差不多了，很簡單的，祝

高德地圖定位、新增定點陣圖標、連線（二）

定位之後想在地圖中顯示，那麼就要在新增一個jar包，該jar包中有地圖的控制元件一、新增定位標記 1、在build.gradle中新增 compile files('libs/AMap_3DMap_V3.3.1_20160419.jar') 使用的

在高德地圖中新增座標點

相關推薦