iT邦幫忙

1
鐵人賽 神助攻 HERE Technologies

如何運用HERE JavaScript於地圖上展示地理定位服務

D.C 2020-09-09 13:50:051481 瀏覽

前言

延續「如何運用HERE JavaScript快速建立前端的網頁顯示地圖」,這篇將介紹,如何透由經緯度或地址資訊,定位出所在位置,並顯示於HERE MAP上。
更多的細節與內容,請參考HERE Developer :
(https://developer.here.com/documentation/maps/3.1.18.1/dev_guide/topics/geocoding.html

方法

1.建立HTML框架,導入HERE MAP網頁

這個部分,在此篇文章將不再另外說明,請參考先前的文章「如何運用HERE JavaScript快速建立前端的網頁顯示地圖」(https://ithelp.ithome.com.tw/articles/10233305)

2.呼叫HERE地理定位服務

地理定位的方式主要為兩種。

  • Geocode - 給予經緯座標資訊,透過HERE雲服務回傳該地點的地址訊息。
// Call the reverse geocode method with the geocoding parameters,
// the callback and an error callback function (called if a
// communication error occurs):
service.reverseGeocode({
  at: '25.038225, 121.568967'
}, (result) => {
  result.items.forEach((item) => {
    // Assumption: ui is instantiated
    // Create an InfoBubble at the returned location with
    // the address as its contents:
    ui.addBubble(new H.ui.InfoBubble(item.position, {
      content: item.address.label
    }));
  });
}, alert);
  • Revise Geocode - 給予地址資訊,透過HERE雲服務回傳該地點的座標訊息

// Get an instance of the geocoding service:
var service = platform.getSearchService();

// Call the geocode method with the geocoding parameters,
// the callback and an error callback function (called if a
// communication error occurs):
service.geocode({
  q: '台北市信義區松仁路89號'
}, (result) => {
  // Add a marker for each location found
  result.items.forEach((item) => {
    map.addObject(new H.map.Marker(item.position));
  });
}, alert);

https://ithelp.ithome.com.tw/upload/images/20200909/20129891ce9ErQ5oQJ.jpg

Codebase :

<html>

<head>
    <title>HERE MAP By JS</title>
    <meta name="viewport" content="initial-scale=1.0,width=device-width" />
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>

<body>
    <div style="width: 100%; height: 500px" id="mapContainer"></div>
    <script>
    // Create a Platform object:
    var platform = new H.service.Platform({
        'apikey': '[Your APIKEY]'
    });

    // Get an object containing the default map layers:
    var defaultLayers = platform.createDefaultLayers({ lg: 'CHT', lg2: 'ENG', size: 512 });

    // Instantiate the map using the vecor map with the
    // default style as the base layer:
    var map = new H.Map(
        document.getElementById('mapContainer'),
        defaultLayers.raster.normal.map, {
            zoom: 15,
            center: { lat: 25.037537, lng: 121.564376 },
        });

    // Enable the event system on the map instance:
    var mapEvents = new H.mapevents.MapEvents(map);

    // Add event listener:
    map.addEventListener('tap', function(evt) {
        // Log 'tap' and 'mouse' events:
        console.log(evt.type, evt.currentPointer.type);
    });

    // Instantiate the default behavior, providing the mapEvents object: 
    var behavior = new H.mapevents.Behavior(mapEvents);



    // Create the default UI:
    var ui = H.ui.UI.createDefault(map, defaultLayers, 'zh-CN')


    // Get an instance of the geocoding service:
    var service = platform.getSearchService();



    // Call the geocode method with the geocoding parameters,
    // the callback and an error callback function (called if a
    // communication error occurs):
    service.geocode({
        q: '台北市信義區松仁路89號'
    }, (result) => {
        // Add a marker for each location found
        result.items.forEach((item) => {
            GeocodeResult = new H.map.Marker(item.position);
            map.addObject(GeocodeResult);
        });
    }, alert);

    

    //Call the reverse geocode method with the geocoding parameters,
    //the callback and an error callback function (called if a
    //communication error occurs):
    service.reverseGeocode({
        at: '25.037537,121.564376'
    }, (result) => {
        result.items.forEach((item) => {
            // Assumption: ui is instantiated
            // Create an InfoBubble at the returned location with
            // the address as its contents:
            ui.addBubble(new H.ui.InfoBubble(item.position, {
                content: item.address.label
            }));
        

        });
    }, alert);

    </script>
</body>

</html>

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言