高德地图内网环境,如何使用JS API

项目初期开发使用的高德地图在线V1.4版本Javascript API进行地图调用及API操作,目前项目转到纯内网环境运行,本地离线资源已有,但是关于地图API的操作,标注点、覆盖物等绘制如何实现?

如果您要在纯内网环境下使用地图 API,需要下载对应的地图库文件,并引入到您的 HTML 页面中。下面是高德地图 JavaScript API 的引入方式:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>高德地图 API 示例</title>
    <style type="text/css">
        #mapContainer {
            width: 100%;
            height: 500px;
        }
    </style>
    <script type="text/javascript" src="/path/to/amap.js"></script>
</head>
<body>
    <div id="mapContainer"></div>
    <script type="text/javascript">
        // 初始化地图
        var map = new AMap.Map('mapContainer', {
            zoom: 12,
            center: [116.397428, 39.90923]
        });
        
        // 添加标注点
        var marker = new AMap.Marker({
            position: [116.397428, 39.90923],
            title: '北京市',
            map: map
        });
        
        // 添加覆盖物
        var polygon = new AMap.Polygon({
            path: [[116.403322,39.920255],[116.410703,39.897555],[116.402292,39.892353],[116.389846,39.891365]],
            strokeColor: "#FF33FF",
            strokeWeight: 2,
            fillColor: "#1791fc",
            fillOpacity: 0.2
        });
        polygon.setMap(map);
    </script>
</body>
</html>


上面的代码中,我们首先在 head 标签中引入了地图库文件 amap.js,然后在 body 标签中创建一个用于容纳地图的 div 元素 mapContainer。在 JavaScript 代码中,我们创建了一个地图对象并将其绑定到 div 元素上,然后在地图上添加了一个标注点和一个覆盖物。

需要注意的是,由于您现在处于纯内网环境,您需要先下载对应版本的地图库文件 amap.js 并将其保存在您的本地服务器上,然后将

引用 皆我百晓生 小程序回复内容作答:
在高德地图的内网环境中,由于无法直接访问高德地图的在线服务,需要使用离线资源进行地图调用和API操作。下面是一种方式来实现标注点和覆盖物的绘制。

  1. 将高德地图的JavaScript API离线资源下载到本地,并在页面中引入。
<script src="path/to/amap.js"></script>
  1. 创建地图实例。
var map = new AMap.Map('mapContainer', {
  // 地图配置项
});
  1. 添加标注点。
var marker = new AMap.Marker({
  position: [longitude, latitude], // 经纬度
  map: map, // 地图实例
});

// 可以使用 setLabel 方法设置标注点的标题
marker.setLabel({
  content: '标注点标题',
  offset: new AMap.Pixel(20, 0), // 偏移量
});
  1. 添加覆盖物。
var overlay = new AMap.Marker({
  position: [longitude, latitude], // 经纬度
  map: map, // 地图实例
  icon: 'path/to/overlay.png', // 覆盖物图片路径
  size: new AMap.Size(50, 50), // 覆盖物大小
  offset: new AMap.Pixel(-25, -50), // 偏移量
});

// 可以使用 setLabel 方法设置覆盖物的标题
overlay.setLabel({
  content: '覆盖物标题',
  offset: new AMap.Pixel(0, -30), // 偏移量
});

以上代码片段示例了如何在高德地图的内网环境中使用离线资源来实现标注点和覆盖物的绘制。具体的使用方法可以根据实际需求进行调整和扩展。

引用chatgpt内容作答:
在将项目从高德地图在线环境转移到内网环境后,您需要进行一些调整来实现地图的操作、标注点和覆盖物的绘制。以下是在内网环境中使用高德地图Javascript API进行地图绘制的一般步骤:

1、获取离线资源: 确保您已经在内网环境中获取了高德地图Javascript API的离线资源。这些资源通常包括API的Javascript库、样式文件、图标等。

2、引入离线资源: 在您的HTML页面中引入高德地图的离线资源,类似于引入其他Javascript库。确保资源路径正确。

<script src="/path/to/amap.js"></script>
<link rel="stylesheet" href="/path/to/amap.css">

3、初始化地图: 使用离线资源中提供的方法初始化地图。通常需要提供一个包含地图配置的容器元素。

<div id="mapContainer" style="width: 100%; height: 400px;"></div>
<script>
  var map = new AMap.Map('mapContainer', {
    // 配置地图参数,例如缩放级别、中心点等
  });
</script>

4、绘制标注点: 使用API提供的方法在地图上绘制标注点。

<script>
  var marker = new AMap.Marker({
    position: [longitude, latitude], // 经纬度
    map: map, // 地图对象
    title: 'Marker Title'
  });
</script>

5、绘制覆盖物: 使用API提供的方法绘制覆盖物,如多边形、折线等。

<script>
  var polygon = new AMap.Polygon({
    path: [[lon1, lat1], [lon2, lat2], [lon3, lat3]], // 构成多边形的点坐标数组
    map: map,
    fillColor: '#00FF00', // 填充颜色
    strokeColor: '#0000FF', // 边线颜色
    strokeWeight: 2 // 边线宽度
  });
</script>

这只是一个简单的示例,实际情况可能会更加复杂。您需要根据离线资源的具体API文档以及项目的需求进行调整和扩展。确保您具备离线资源的完整API文档和使用说明,以便更好地操作地图、标注点和覆盖物等。

在不能访问外网的情况下,只能你根据官网的js下载到本地,然后本地调用使用。资源包也要下载。


高德地图 API 提供包括 Web API 即 JavaScript API,Android API,定位API,IOS API,WP API,Win8 API等,本系列教程主要针对高德 JavaScript API,希望与开发者们共同进步。


  地图JavaScript API 是由 JavaScript 语言编写的应用程序接口,通常是嵌入到HTML中使用。HTML 配合 CSS 主要控制网页布局和样式,地图JavaScript API 则是占据网站的一部分构建具有地图各种功能且由用户控制交互效果的地图应用。目前高德地图 JavaScript API 提供地图基本操作,地图基本控件(可根据需求自定义控件),地图绘制,地图标注以及本地搜索、出行(公交、步行、驾车)导航、地理|逆地理编码等功能。

  调用 JavaScript API 前用户需要先注册账户并申请key,API引用地址为“http://webapi.amap.com/maps?v=1.2&key=申请的key”,下面先讲讲最基本的在网页中加载地图是如何实现的。

开发指南:http://api.amap.com/Javascript/guide

参考手册:http://api.amap.com/Javascript/reference

一、告诉浏览器,这是一个HTML文件。代码中的尖括号称为标签,为避免不必要的错误,请严格闭合标签。

<!DOCTYPE HTML>
<html>
</html>
二、一个简单的样式,给你的地图预定一个容身之所。container 即放置地图的地方,也可以直接在<div>中设置

<style type="text/css">
    html{height:100%}
    body{height:100%;margin:0px;padding:0px}
    #container{height:100%}
</style>
三、引入高德 JavaScript API

<head>
    <script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=申请的key值"></script>
</head>
四、在这里使用上面预定的地图容器

<div id="container"></div>
五、设置地图初始化属性 mapOptions,如不设置地图初始化属性,地图会根据你所在城市作为地图中心点显示。注意:设置属性时,只一个属性句尾不需要“,”;多个属性时除最后一个属性其余都需要“,”

var mapOptions = {
    center: new AMap.LngLat(116.397428,39.90923), //地图中心点
    level: 13  //地图显示的缩放级别
};

center: 高德 JavaScript API 提供一个容器LngLat放置我们平时见到的坐标(116.397428,39.90923),传给地图,作为地图显示的中心点

center: new AMap.LngLat(116.397428,39.90923)
level: 地图缩放级别,取值[3-18] ,下图分别为取值为3\13\18的效果

高德地图 JavaScript API 开发系列教程(一)-LMLPHP  高德地图 JavaScript API 开发系列教程(一)-LMLPHP  高德地图 JavaScript API 开发系列教程(一)-LMLPHP

六、创建地图实例

mapObj = new AMap.Map("container", mapOptions);
七、载入地图

<body onLoad="mapInit()">
</body>
到这里就完成了基本地图显示

高德地图 JavaScript API 开发系列教程(一)-LMLPHP

完整代码

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
    html{height:100%}
    body{height:100%;margin:0px;padding:0px}
    #container{height:100%}
</style>
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=申请的key"></script>
<script language="javascript">
    var mapObj;
    function mapInit(){
        var mapOptions = {       center:new AMap.LngLat(116.397428,39.90923),
          level:13
        };
        mapObj = new AMap.Map("container", mapOptions);
    }
</script>
</head>
<body onLoad="mapInit()">
    <div id="container" > </div>
</body>
</html>        
初始化默认属性时的完整代码

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
    html{height:100%}
    body{height:100%;margin:0px;padding:0px}
    #container{height:100%}
</style>
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=申请的key"></script>
<script language="javascript">
    var mapObj;
    function mapInit(){
        mapObj = new AMap.Map("container");
    }
</script>
</head>
<body onLoad="mapInit()">
    <div id="container"> </div>
</body>
</html>
题外话,即便不是码农也可以选择一个好的编辑器,强烈推荐Sublime Text 2

配置说明:http://www.iplaysoft.com/sublimetext.html