高德地图开放API

发布： • 经验百科 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Document</title>
    <!-- 1. 如果是移动端开发，请在head标签内添加viewport meta标签，以达到最佳的绘制性能 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style>
      /* 通过 css 为地图容器指定高度、宽度； */
      #container {
        width: 1920px;
        height: 1080px;
      }
    </style>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "cc2018dc6e0480a5342d71d7fa7a1e48",
      };
    </script>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=a60e52709801c0f7f70599610a168119"
    ></script>
  </head>

  <body>
    <!-- 2. 添加div标签作为地图容器，同时为该div指定id属性； -->
    <div id="container"></div>
    <script>
      // 创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性：
      let map = new AMap.Map("container", {
        zoom: 11, //级别
        center: [116.98, 36.67], //中心点坐标
        viewMode: "3D", //使用3D视图
      });
      // //添加实时路况图层 默认情况下，地图只显示标准底图，如需要叠加别的图层，可以通过map.add方法添加图层：
      // var trafficLayer = new AMap.TileLayer.Traffic({
      //   zIndex: 10,
      // });
      // map.add(trafficLayer); //添加图层到地图
      var marker = new AMap.Marker({
        position: [116.98111, 36.67111],
      });
      map.add(marker); //添加标记点
      try {
        AMap.plugin("AMap.DistrictSearch", () => {
          // 创建行政区查询对象
          var district = new AMap.DistrictSearch({
            // 返回行政区边界坐标等具体信息
            extensions: "all",
            // 设置查询行政区级别为 区
            level: "city",
            subdistrict: 0,
          });

          district.search("济南市", (status, result) => {
            console.log(status, result);
            // 获取济南市的边界信息
            var bounds = result.districtList[0].boundaries;
            var polygons = [];
            if (bounds) {
              for (var i = 0, l = bounds.length; i < l; i++) {
                //生成行政区划polygon
                var polygon = new AMap.Polygon({
                  map: map,
                  strokeWeight: 1,
                  path: bounds[i],
                  fillOpacity: 0.7,
                  fillColor: "#CCF3FF",
                  strokeColor: "#CC66CC",
                });
                polygons.push(polygon);
              }
              // 地图自适应
              // map.setFitView();
            }
          });
        });
      } catch (e) {
        console.log(e);
      }
    </script>
  </body>
</html>

推荐这些文章：

高德地图做用户信息展示

需求：在地图上做定位显示，用来反映用户当前累计的任务信息
 
1.注册账号并申请 Key 具体步骤查看高德官网：https://lbs.amap.com/api/javascript-api 
   引入地图：
　

<script type="text/javascript"
src='https://webapi.amap.com/maps?v=1.4.15&key=1a8affc2fee6059cb256649247d13d8a&plugin=AMap.MarkerClusterer"'&...

高德地图按索引聚合实现

drawQiye(markerList) {
let that = this;　　　　// 这里需要标准你要根据哪些字段进行聚合，以及在什么缩放范围内进行聚合
const clusterIndexSet = {
streetAddress: {
minZoom: 10,
maxZoom: 13,
},
entName: {
minZoom: 13,
maxZoom: 20,
},
};　　　 // 这里需要单独...

高德地图JS-API初始化地图配置 | vue实现

首先在高德地图开放平台创建一个Web端的key；
创建一个vue项目，然后执行下面命令
npm i @amap/amap-jsapi-loader --save

新建一个组件MapContainer.vue
<template>
<div id="container" @click="clickMap"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
data() {
...

vue3使用ECharts地图配置高德地图实现往下钻效果

/*准备工作*/

//安装echarts
npm install echarts

//index.html文件中加入这俩行代码
<script src='https://webapi.amap.com/maps?v=1.3&key=你申请的key&plugin=AMap.DistrictSearch'></script>
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>

//可以单独封装一个获取json的js文件
export function...

zabbix通过API批量添加主机

参考链接：https://blog.csdn.net/weixin_34107955/article/details/89821524
脚本内容

#coding:utf-8

import json
import urllib2
from urllib2 import URLError
import sys
import xlrd

class ZabbixTools:
def __init__(self):
self.url = 'http://zabbix-dashboard.gc1.pt.gomedc.com/zabbix/api_jsonrpc....

Vue - Amap高德地图初始化使用以及行政区域聚合功能（script引入方式）

 
一、引入高德JSAPI

//在项目根目录下的模板index.html中引入下面2个JSAPI
<head>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=AMap.DistrictSearch,AMap.Scale,AMap.MarkerClusterer"></script>
<script type="text/javascript" src="//webapi.amap.co...

请教：高德地图js API开发使用

问题
我看文档上只有clearMap()是删除地图所有信息，marker.setMap(null)这两个清除的方法。
我要根据树状结构勾选的选项来遍历删除，应该怎么写呢？
前面传过来的信息都有了，就是不知道怎么查找到那个点。
我看mapabc有getOverlayById方法查找点和removeOverlayById删除点，不知道在高德地图上应该怎么实现。

最佳回答
你可以先全部删除：clearMap()
在循环获取所有没有勾选的，保存这些值。
循环这些值，一次添加这个：marker.setMap(null)

...

拖拽地图/点坐标定位（高德地图）

法一：使用地图自带的UI库

<div class="mapShow">
<el-amap vid="amap" :events="events" :center="center" :zoom="zoom" :amap-manager="amapManager" map-style="amap://styles/fresh">
</el-amap>
</div>

private zoom: number = 16;
private center: any = [119.72498, 30.23...

Vue中使用echarts@4.x中国地图及AMap相关API的使用

一、此 demo 实现的基本功能

中国地图的显示
地图点击下钻的功能
地图相关组件的使用，例 tooltip...

二、实现思路
初始使用下载本地的中国 geo 格式的 json 数据来绘制地图，点击某一区划（例：山东省）时，以点击的区划名称使用 AMap.DistrictSearch(opts) 构造函数查询下一级的区划信息（例：青岛市区划 id 为 370200）和业务数据整合处理；然后以点击的区划 id 用AMapUI中的组件DistrictExplorer相关方法获取下一级的地图 json 数据，继而绘制下一级地图（例：青岛市），再点下同...
三、引入 echarts
因为 ...

区分高德地图缩放和位移

需求是要实现地图位移的时候，请求数据，但是地图缩放的时候不请求数据；我的地图的缩放级别是15faMap.setOnCameraChangeListener(object : AMap.OnCameraChangeListener { override fun onCameraChange(p0: CameraPosition?) { } override fun onCameraChangeFinish(p0: CameraPosition?) {
if (p0.zoom != 15f) return fetch()
}})

...

文章标题：高德地图开放API
文章链接：https://www.dianjilingqu.com/51064.html
本文章来源于网络，版权归原作者所有，如果本站文章侵犯了您的权益，请联系我们删除，联系邮箱：saisai#email.cn，感谢支持理解。
THE END
< <上一篇
下一篇>>