网页中嵌入google地图

一丶前言

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

一丶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>