一丶前言

大致需求:美国地图中标记分布的仓库图钉(鼠标经过显示地址详情),通过输入寄收件地邮编来在地图上定位位置添加图钉,将寄件地,选择的仓库,收件地图钉折线相连接,表示大致路线。

一丶google开发者中申请密钥(YOUR_API_KEY)

进入Google Developers Console创建一个Project,申请一个地图api key,可以设置api权限和访问限制。

二丶根据官方文档先加载出地图

参照官方文档,这里官方给出的案例是异步加载的方式,但是在实际开发项目中api只能写在引入js后面,异步加载的方式会导致调用顺序而报错,因此使用同步加载方式。

1.引入在线google map js

 // <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> 官方异步
<script src="https://maps.googleapis.com/maps/api/js?key=yourkey"></script>

2.html给容器显示地图

<div id="googleMap" style="width:100%;height:380px;"></div>

3.初始化地图

 <script>
// 初始化地图
function initialize() {
var mapProp = {
center:new google.maps.LatLng(37.09024,-95.71289100000001),
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
} google.maps.event.addDomListener(window, 'load', initialize);
</script>

三丶在地图上创建图钉标记

1.根据坐标创建图钉

var myLatLng = {lat: -25.363, lng: 131.044};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});

上面的是官方文档创建的,我是用了MarkerWithLabel (MarkerWithLabel extends the Google Maps JavaScript API V3)方法创建。

我是根据后台返回的仓库数组创建一个图标list,循环添加事件

 function builderStorageMarker() {
$.ajax({
url:'markerList.html',
success:function (res) {
warehouseList = res.data
for(var i=0;i<res.data.length;i++){
var marker = new MarkerWithLabel({
position:new google.maps.LatLng(res.data[i].longitude,res.data[i].latgitude),
labelContent: res.data[i].wareHouseName,
labelAnchor: new google.maps.Point(7, 0),
// labelClass: "labels", // the CSS class for the label
icon:'/front/img/service/position_blue.png',
map: map
});
//对应的infowindow
marker.infowindow = new google.maps.InfoWindow({
content: res.data[i].address
});
//绑定对应的事件
(function(i, marker) {
google.maps.event.addListener(
marker,
'click',
function() {
changeColor(marker,i)
})
marker.addListener('mouseover', function() {
marker.infowindow.open(map, marker);
})
marker.addListener('mouseout', function() {
marker.infowindow.close();
});
})(i, marker)
makerList.push(marker)
}
}
})
}

MarkerWithLabel.js下载地址

var marker = new MarkerWithLabel({
position:new google.maps.LatLng(-25.363,131.044),
labelContent:"图钉下面的名字",
labelAnchor: new google.maps.Point(7, 0),
// labelClass: "labels", // the CSS class for the label
icon:'图钉.png',
map: map
});

2.图钉绑定对应的事件

 marker.addListener('mouseover', function() {
marker.infowindow.open(map, marker);
})
marker.addListener('mouseout', function() {
marker.infowindow.close();
})

3.点击图钉改变颜色

    function changeColor(maker,number) {
// maker.icon = '/front/img/service/position_red.png'
// maker.setMap(map) // 使用MarkerWithLabel更改icon不起作用
maker.setIcon('marker_red.png')
}

丶根据地址或者邮编获得经纬度,然后创建图钉标记位置

     //反向地址转换(geocode()是异步函数)
async function zipFormatPosition(zipCode) {
return new Promise(resolve => {
geocoder.geocode({ 'address': zipCode}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// var latitude = results[0].geometry.location.lat();
// var longitude = results[0].geometry.location.lng();
resolve(results[0].geometry.location)
} else {
$.messageBox({
level: 'error',
message: '邮编获取地址失败,请输入正确邮编'
});
// resolve(false)
}
});
})
} zipFormatPosition("zipcode or address").then(result => {
var zipPosition = result;
if(zipPosition){
var receiverPosition = new google.maps.LatLng(zipPosition.lat(),zipPosition.lng());
receiverMaker = new google.maps.Marker({
position:receiverPosition,
icon:'marker_yellow.png'
});
receiverMaker.setMap(map);
}
})

丶构建折线连接地址

  var flightPlanCoordinates = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
}); flightPath.setMap(map);

丶彩蛋:bing地图换成了Google地图(bing map变成了demo)

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>bing</title>
</head>
<body> <div class="fee-est us-est" onload='GetMap();'>
<div>后来用google地图了,bing地图变成了demo</div>
</div>
<script>
//bing地图
function GetMap() {
var map = new Microsoft.Maps.Map('#myMap', {
credentials: 'AsXFUZiAIxemlXll9Pous5-umMjpOdiYdFALFnsLzWK6pzQOzXLYnbwVyojNFUnw ',
center: new Microsoft.Maps.Location(51.50632, -0.12714),
zoom: 10,
disableScrollWheelZoom:true
});
//添加图钉
var center = map.getCenter(); //Create custom Pushpin
var defaultColor = 'blue';
var mouseDownColor = 'purple'; var pin1 = new Microsoft.Maps.Pushpin(map.getCenter(), {
color: defaultColor
});
console.log(pin1)
var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.50632, -0.19714), {
color: defaultColor
}); map.entities.push(pin1);
map.entities.push(pin2); Microsoft.Maps.Events.addHandler(pin1, 'mousedown', function (e) {
e.target.setOptions({ color: mouseDownColor });
pin2.setOptions({ color: mouseDownColor });
}); }
</script>
<script type='text/javascript'
src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=YOUR_API_KEY'
async defer></script>
</body>
</html>

网页中嵌入google地图的更多相关文章

  1. 网页中嵌入百度地图报错:The request has been blocked,the content must served over Https

    网页中嵌入百度地图 1.进入百度地图开发平台:http://lbsyun.baidu.com/index.php?title=jspopular 2.获取密钥:http://lbsyun.baidu. ...

  2. pc网页中嵌入百度地图

    pc网页中嵌入百度地图 1 打开百度地图生成器: http://api.map.baidu.com/lbsapi/creatmap/ 2 设置好了之后,点击获取代码,将代码粘贴到文件中保存为html文 ...

  3. 在VC/MFC中嵌入Google地图——图文并茂

    近期须要实验室须要将在无人机地面站中嵌入地图,在网上找了非常多资料,最终有些眉目了, 首先.做这个须要用到的知识有.MFC控件.MFC类库.JavaScript脚本语言.Google API.Goog ...

  4. 网页中调用Google地图

    <html> <head>  <meta http-equiv="Content-Type" content="text/html; cha ...

  5. C# 程序中嵌入百度地图

    本例是对WinForm中使用百度地图的简要介绍.百度地图目前支持Android开发,IOS开发,Web开发,服务接口,具体可以参照'百度地图开放平台'. [动态加载百度地图]涉及到的知识点: WebB ...

  6. 使用CKplayer插件在网页中嵌入视频的方法(常用笔记2)

    在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...

  7. 使用JWPlayer在网页中嵌入视频

    首发:个人博客,持续更新和纠错 我一直以为在网页中嵌入视频是件复杂的事,一研究才知道原来非常简单. 实际就是在页面中嵌入个控件.社区里已有很多解决方案了.jwplayer是最受欢迎的(之一).控件包括 ...

  8. 利用CSS的@font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

  9. 在ActiveReports页面报表中显示Google地图

    有些报表需求中需要我们显示国家.城市等地址信息,在报表中添加地图信息会让报表给最终用户代码更多有效信息. 在报表中可以将地图作为图片添加进来,当一个图片显示在报表中时,该图片必须存放到本地计算机或者服 ...

随机推荐

  1. echart的x换行

    option = { legend: { y: 'bottom', data:['该业务正常类比例','该业务关注类比例','该业务不良类比例'] }, xAxis: { type: 'categor ...

  2. STD函数的内部计算公式

    各股票软件的标准差函数STD是不同的,而布林线的上下轨是以STD为基础计算出来的,所以使用布林线应小心.以2008/3/28的上证综指为例,利用如下代码:"收盘价3日STD:STD(CLOS ...

  3. ARM LCD屏调试3--屏的应用编程

    2011-06-25 19:20:47 驱动自己写完了,应用函数自己就不写了,找了一点代码参考,移植并修改了一下,配合之前的定义的接口文档,我贴出部分代码.目录: 一,开发环境... 1 二,底层函数 ...

  4. es7,es8

    ES7新特性 ES7在ES6的基础上添加了三项内容:求幂运算符(**).Array.prototype.includes()方法.函数作用域中严格模式的变更. Array.prototype.incl ...

  5. python基础部分----文件、copy、内存指针

    0.来源:https://www.cnblogs.com/jin-xin/articles/9439483.html 1.is VS id() VS == 2.小数据池.代码块缓存机制 3.赋值符号= ...

  6. 算法(第四版)C# 习题题解——2.5

    写在前面 整个项目都托管在了 Github 上:https://github.com/ikesnowy/Algorithms-4th-Edition-in-Csharp 查找更方便的版本见:https ...

  7. 2019年3月10日 装饰器进阶-模拟session

    ser_dic={'username':None,'login':False}#用户字典,反应登入状态,用字典做全局变量 def idf(func):#验证登入信息是否正确 def wrapper(* ...

  8. 软件测试3gkd

        一.单元测试的任务 单元测试主要是对软件的基本组成单元进行测试,且所测试单元与程序的其他部分在测试中相隔离. 在单元测试中,我们需要对与程序构建中的单位测试以保证其可靠运行与代码规范. 单元测 ...

  9. c++的虚继承

    今天去面试了一家公司,真是套路深啊,套路深,原谅我是后知后觉,所以人吧总的长大,出差正常情况下都是有补贴的,为啥这部分也要算我工资一部分,名其名曰工资高,哈哈哈,自古套路方得人心 今天学习了一下c++ ...

  10. style.left offsetLeft offsetwidth clientLeft clientWidth scrollLeft scrollWidth

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...