GoogleMap v3 API详解，该怎么解决

Posted 2023-05-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了GoogleMap v3 API详解，该怎么解决相关的知识，希望对你有一定的参考价值。

参考技术A

我曾经用这个做过google离线地图的展示和渲染，下面是相关代码：

加载本地地图的函数：

function LocalMapType()
    LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
    LocalMapType.prototype.maxZoom = 13;  // 地图显示最大级别
    LocalMapType.prototype.minZoom = 9;   // 地图显示最小级别
    LocalMapType.prototype.name = "本地"; // 本地按钮，就是离线地图
    LocalMapType.prototype.alt = "显示本地地图";  // 显示本地地图可能会出现不清晰的现象
    LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument)
    var img = ownerDocument.createElement("img");
    img.style.width = this.tileSize.width + "px";
    img.style.height = this.tileSize.height + "px";

    // 访问本地图片的算法，不同的地图切图工具对应的算法不同
    var strURL = "gmap/tiles/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
    img.src = strURL;
    return img;
    ;

    var localMapType = new LocalMapType();

初始化地图函数：

function initialize()
    // 以该经纬度为中心居中显示，注意google 一般先写纬度，在写经度
    var myLatlng = new google.maps.LatLng(30.51667,114.31667);
    var myOptions =
      center: myLatlng,
      zoom: 10,        // 初始化地图默认级别
      streetViewControl: false,     // 默认不显示全景图
      mapTypeControlOptions:
        mapTypeIds: ["local", google.maps.MapTypeId.ROADMAP] // 地图类型为普通街道地图

    ;

    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    map.mapTypes.set('local', localMapType);
    map.setMapTypeId('local');
    // 设置地图瓦片大小为256*256
    map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));

html代码：

在离线的情况下渲染离线地图：
1.加载图片：

var image = 'icon/0.png'; // 存放图片的路径
    var myLatLng = new google.maps.LatLng(30.51667,114.31667); // 图片显示的地方
    var beachMarker = new google.maps.Marker(
    position: myLatLng,
    map: map,
    icon: image
);

2.画折线：

var flightPlanCoordinates = [
    new google.maps.LatLng(30.51667,114.31667),
    new google.maps.LatLng(30.50667,114.32667),
    new google.maps.LatLng(30.40667,114.30667)
    ];
    var flightPath = new google.maps.Polyline(
       path: flightPlanCoordinates,
       strokeColor: "#FF0000",
       strokeOpacity: 1.0,
       strokeWeight: 2
    );

    flightPath.setMap(map); // 如果想还原去掉折线用：flightMap.setMap(null)

3.画圆：

var citymap = ;
   citymap['chicago'] =
   center: new google.maps.LatLng(31.18439, 121.49454),
   population: 284259
   ;
   citymap['newyork'] =
   center: new google.maps.LatLng(31.38439, 121.52454),
   population: 814319
   ;
   var cityCircle;

   for (var city in citymap)
   var populationOptions =
     strokeColor: "#FF0000",
     strokeOpacity: 0.8,
     strokeWeight: 1,
     fillColor: "#FF0000",
     fillOpacity: 0.35,
     map: map,
     center: citymap[city].center,
     radius: citymap[city].population / 1000
   ;
   cityCircle = new google.maps.Circle(populationOptions);

4.画多边形：

// 如果是多边形，最后一个点不需要写成第一个点就可以自动连起来
     var triangleCoords = [
     new google.maps.LatLng(30.51667,114.31667),
         new google.maps.LatLng(30.50667,114.42667),
         new google.maps.LatLng(30.40667,114.30667)
    ];

    bermudaTriangle = new google.maps.Polygon(
        paths: triangleCoords,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35
    );

    bermudaTriangle.setMap(map);

希望对你有用。

本回答被提问者采纳

getaddrinfo()详解

IPv4中使用gethostbyname()函数完成主机名到地址解析，但是该API不允许调用者指定所需地址类型的任何信息，返回的结构只包含了用于存储IPv4地址的空间。为了解决该问题，IPv6中引入了getaddrinfo()的新API，它是协议无关的，既可用于IPv4也可用于 IPv6。调用该函数会获得一个addrinfo结构的列表，调用的返回值是addrinfo的结构（列表）指针。

本文结合在WinowsXP和Windows2003 Server上使用该函数的经验，对getaddrinfo函数和addrinfo数据结构进行介绍，并对其参数的设置加以讨论，主要包括 nodename和servname的取值对返回值的影响，hints成员变量的设置对返回值的影响等。

可能有不完全或不准确的地方，欢迎大家讨论并指出。

1．getaddrinfo函数原型

函数

参数说明

int getaddrinfo(

const char* nodename

const char* servname,

const struct addrinfo* hints,//

struct addrinfo** res

);

nodename:节点名可以是主机名，也可以是数字地址。（IPV4的10进点分，或是IPV6的16进制）

servname:包含十进制数的端口号或服务名如（ftp,http）

hints:是一个空指针或指向一个addrinfo结构的指针，由调用者填写关于它所想返回的信息类型的线索。

res:存放返回addrinfo结构链表的指针

Getaddrinfo提供独立于协议的名称解析。

函数的前两个参数分别是节点名和服务名。节点名可以是主机名，也可以是地址串(IPv4的点分十进制数表示或IPv6的十六进制数字串)。服务名可以是十进制的端口号，也可以是已定义的服务名称，如ftp、http等。注意：其中节点名和服务名都是可选项，即节点名或服务名可以为NULL，此时调用的结果将取缺省设置，后面将详细讨论。

函数的第三个参数hints是addrinfo结构的指针，由调用者填写关于它所想返回的信息类型的线索。函数的返回值是一个指向addrinfo结构的链表指针res。

2．addrinfo结构

结构	固定的参数
typedef struct addrinfo { int ai_flags; int ai_family; int ai_socktype; int ai_protocol; size_t ai_addrlen; char* ai_canonname; struct sockaddr* ai_addr; struct addrinfo* ai_next; }	ai_addrlen must be zero or a null pointer ai_canonname must be zero or a null pointer ai_addr must be zero or a null pointer ai_next must be zero or a null pointer
	可以改动的参数
	ai_flags:AI_PASSIVE,AI_CANONNAME,AI_NUMERICHOST ai_family: AF_INET,AF_INET6 ai_socktype:SOCK_STREAM,SOCK_DGRAM ai_protocol:IPPROTO_IP, IPPROTO_IPV4, IPPROTO_IPV6 etc.

3 参数说明

在getaddrinfo函数之前通常需要对以下6个参数进行以下设置：nodename、servname、hints的ai_flags、ai_family、ai_socktype、ai_protocol

在6项参数中，对函数影响最大的是nodename，sername和hints.ai_flag

而ai_family只是有地址为v4地址或v6地址的区别。而ai_protocol一般是为0不作改动。

其中ai_flags、ai_family、ai_socktype说明如下：

参数	取值	值	说明
ai_family	AF_INET	2	IPv4
	AF_INET6	23	IPv6
	AF_UNSPEC	0	协议无关
ai_protocol	IPPROTO_IP	0	IP协议
	IPPROTO_IPV4	4	IPv4
	IPPROTO_IPV6	41	IPv6
	IPPROTO_UDP	17	UDP
	IPPROTO_TCP	6	TCP
ai_socktype	SOCK_STREAM	1	流
ai_socktype	SOCK_DGRAM	2	数据报
ai_flags	AI_PASSIVE	1	被动的，用于bind，通常用于server socket
	AI_CANONNAME	2
	AI_NUMERICHOST	4	地址为数字串

对于ai_flags值的说明：

AI_NUMERICHOST	AI_CANONNAME	AI_PASSIVE
0/1	0/1	0/1

如上表所示，ai_flagsde值范围为0~7，取决于程序如何设置3个标志位，比如设置ai_flags为 “AI_PASSIVE|AI_CANONNAME”，ai_flags值就为3。三个参数的含义分别为：

(1)AI_PASSIVE当此标志置位时，表示调用者将在bind()函数调用中使用返回的地址结构。当此标志不置位时，表示将在connect()函数调用中使用。

当节点名位NULL，且此标志置位，则返回的地址将是通配地址。

如果节点名NULL，且此标志不置位，则返回的地址将是回环地址。

(2)AI_CANNONAME当此标志置位时，在函数所返回的第一个addrinfo结构中的ai_cannoname成员中，应该包含一个以空字符结尾的字符串，字符串的内容是节点名的正规名。

(3)AI_NUMERICHOST当此标志置位时，此标志表示调用中的节点名必须是一个数字地址字符串。

4．实际使用的几种常用设置

一般情况下，client/server编程中，server端调用bind（如果面向连接的还需要listen），client则不用掉bind函数，解析地址后直接connect（面向连接）或直接发送数据（无连接）。因此，比较常见的情况有

（1）通常服务器端在调用getaddrinfo之前，ai_flags设置AI_PASSIVE，用于bind；主机名nodename通常会设置为NULL，返回通配地址[::]。

（2）客户端调用getaddrinfo时，ai_flags一般不设置AI_PASSIVE，但是主机名nodename和服务名servname（更愿意称之为端口）则应该不为空。

（3）当然，即使不设置AI_PASSIVE，取出的地址也并非不可以被bind，很多程序中ai_flags直接设置为0，即3个标志位都不设置，这种情况下只要hostname和servname设置的没有问题就可以正确bind。

上述情况只是简单的client/server中的使用，但实际在使用getaddrinfo和参考国外开源代码的时候，曾遇到一些将servname（即端口）设为NULL的情况

(当然，此时nodename必不为NULL，否则调用getaddrinfo会报错)。以下分情况进行了测试：

（1）如果nodename是字符串型的IPv6地址，bind的时候会分配临时端口；

（2）如果nodename是本机名，servname为NULL，则根据操作系统的不同略有不同

注意点是：这个函数，说起来，是get ，但是其实可以理解为creat 或者是理解为构建。因为你可以随意构建自己的地址结构addrinfo。

如果本函数返回成功，那么由result参数指向的变量已被填入一个指针，它指向的是由其中的ai_next成员串联起来的addrinfo结构链表。可以导致返回多个addrinfo结构的情形有以下2个：
1. 如果与hostname参数关联的地址有多个，那么适用于所请求地址簇的每个地址都返回一个对应的结构。
2. 如果service参数指定的服务支持多个套接口类型，那么每个套接口类型都可能返回一个对应的结构，具体取决于hints结构的ai_socktype 成员。

我们必须先分配一个hints结构，把它清零后填写需要的字段，再调用getaddrinfo然后遍历一个链表逐个尝试每个返回地址。

getaddrinfo解决了把主机名和服务名转换成套接口地址结构的问题。

其中，如果getaddrinfo出错，那么返回一个非0的错误值。

官方说明的链接：http://www.kernel.org/doc/man-pages/online/pages/man3/gai_strerror.3.html

很详细。

以上是关于GoogleMap v3 API详解，该怎么解决的主要内容，如果未能解决你的问题，请参考以下文章

GoogleMap api - ReferenceError：分配中的左侧无效

GoogleMap.getMyLocation() 返回 null

从后台恢复后，Flutter GoogleMap 为空白

GoogleMap API 为两点之间的方向提供了错误的坐标

GoogleMap API 调用基础学习

带有 Googlemap 静态 api 的 Nativescript - iOS 上的问题