google.maps.event.adddDomListen(window, 'load', callback);
当文档流中所有的dom加载完成后,执行回调函数,可以不用在script中使用defer和async的模式
<script defer async
src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY&sensor=false">
</script>

动态的加载script标签

window.onload = function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.url = url;
//在url中定义参数,决定是否需要回调,&callback=funcName
document.body.appendChild(script);
}

初始化地图
定义地图属性

var mapPro = {
center: {lat: number, lng: number} || google.maps.LatLng(number, number),
zoom: number,
mapType: '地图类型'
}

center 地图中心点位置 经纬度 数据类型为数值(不能填写字符串) 两种格式{lat: number, lng: number} google.maps.LatLng(number, number)
zoom 放大的倍数
mapType 地图的类型 四种 基本格式 Google.maps.MapTypeId.type type {'街道透明层': HYBRID, '普通街道': ROADMAP, '卫星地图': SATELLITE, '具有自然特征': TERRAIN}

坑记录: not a LatLng or LatLngLiteral: in property lat: not a number 类似于center的数据一定是要number的
initMap is not a function 定义于请求google map的参数回调函数没有定义造成

google map marker : new google.maps.Marker({position: '位置, 需要center格式的number数据', map: map, icon: '一个图片'}),多点标记使用循环实现,一个new google.maps.Marker实例是一个点,icon 定义图标

map 指向 map初始化实例

坑记录: 标记不显示,没有报任何错。 --参数名字打错,注意参数名字

google map polyline: new google.maps.Polyline({path, strokeColor, strokeOpacity, strokeWeight, fillColor, fillOpacity, editable})

path: 坐标点集合,数据和上述坐标的数据格式一致
strokeColor: 路径线的颜色
strokeOpacity: 路径线的透明度
strokeOpacity: 路径线的粗细程度
fillColor: 填充的颜色
fillOpacity: 填充的透明度
editable: bool, 路径的线是否可编辑

google map cicle: new google.maps.Circle({center, radius, strokeColor, strokeOpacity, strokeWeight, fillColor, fillOpacity, editable})

google map info: new google.maps.InfoWindow({conent})
消息窗口一般和marker一起使用
infoWindow.open(map, marker);

爬坑之路---Google map的更多相关文章

  1. 多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例

    前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 前面 ...

  2. Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...

  3. Vue 爬坑之路(九)—— 用正确的姿势封装组件

    迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...

  4. Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...

  5. Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目

    Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...

  6. Tinker爬坑之路

    目的 热修复去年年底出的时候,变成了今年最火的技术之一.依旧记得去年面试的时候统一的MVP,然而今年却变成了RN,热修复.这不得不导致我们需要随时掌握最新的技术.不然可能随时会被淘汰.记得刚进公司,技 ...

  7. Android爬坑之路

    做了那么久前端,现在终于可以回到我的老本行, 今天我用了一天的时间配置里Android开发环境,mac和windows双平台,eclipse和IDEA双平台,别问为什么,我就喜欢,中间大坑不断,再加上 ...

  8. 安卓易学,爬坑不易——腾讯老司机的RecyclerView局部刷新爬坑之路

    针对手游的性能优化,腾讯WeTest平台的Cube工具提供了基本所有相关指标的检测,为手游进行最高效和准确的测试服务,不断改善玩家的体验.目前功能还在免费开放中. 点击地址:http://wetest ...

  9. 安卓易学,爬坑不易—腾讯老司机的RecyclerView局部刷新爬坑之路

    前言 安卓开发者都知道,RecyclerView比ListView要灵活的多,但不可否认的里面的坑也同样埋了不少人.下面让我们看看腾讯开发工程师用实例讲解自己踩坑时的解决方案和心路历程. 话说有图有真 ...

随机推荐

  1. iOS 高级去水印,涂鸦去水印

    目前在研究一下图像的处理,看了一下相关的软件,比如:<去水印大师>,究竟去水印是怎么处理的呢?看图分析. 一共是三个功能:快速去水印.高级去水印.涂鸦去水印 快速去水印:暂时没找到好的处理 ...

  2. puppeteer(四)常见问题——部分元素无法操作,代码没任何问题。

    前言 最近写了一个小例子,但是一个page.click无论如何也不能正常操作,语法这么简单不可能有错.于是找原因,浏览器的问题吗?各种开发环境切换,nodejs版本换到较老的版本,npm版本切换,最后 ...

  3. Python使用DDA算法和中点Bresenham算法画直线

    title: "Python使用DDA算法和中点Bresenham算法画直线" date: 2018-06-11T19:28:02+08:00 tags: ["图形学&q ...

  4. 【速读】——Shangxuan Tian——【ICCV2017】WeText_Scene Text Detection under Weak Supervision

    Shangxuan Tian——[ICCV2017]WeText_Scene Text Detection under Weak Supervision 目录 作者和相关链接 文章亮点 方法介绍 方法 ...

  5. (转)利用CAS算法实现通用线程安全状态机

    在多线程环境下,如果某个类是有状态的,那我们在使用前,需要保证所有该类的实例对象状态一致,否则会出现意向不到的bug.下面是通用线程安全状态机的实现方法. public class ThreadSav ...

  6. css基础面试题

    1 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? 标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin低版本IE盒子模型:宽度 ...

  7. LapSRN

    Deep Laplacian Pyramid Networks for Fast and Accurate Super-Resolution 解决问题: 1.bicubic预处理上下采样,计算复杂度高 ...

  8. DotNetCore 部署到IIS 上

    将 DotNetCore MVC 项目成功部署到 IIS 上,记录下配置要点: 1.在 ASP.NET Core 应用中使用 Kestrel Microsoft.AspNetCore.App 元包中包 ...

  9. PyCharm下使用Scrapy建立爬虫项目--MyFirstSpiderObject

    首先下载并安装Anaconda3以及PyCharm Anaconda3选中添加环境变量,如果忘记选中可以手动在path中添加如下环境变量 建文件夹scrapy 安装scrapy cmd进入对应目录,执 ...

  10. MYSQL数据库常用操作命令

    1.连接MYSQL: mysql -h 主机地址 -u 用户名 -p 2.修改密码: 安装后第一次登录使用: mysqladmin (因为没有初始密码) 修改原密码: mysqladmin -u ro ...