在页面中使用google map

最新推荐文章于 2024-01-13 13:44:04 发布

圆师傅

最新推荐文章于 2024-01-13 13:44:04 发布

阅读量504

点赞数

分类专栏：前端文章标签： javascript html5 html

本文链接：https://blog.csdn.net/Apple_wolf/article/details/109118140

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近一段时间，用到地图的地方比较多，之前一篇博客记录了用leaflet使用OSM地图的例子，这里再记录一下使用google map中遇到的一些问题。

1. 首先把地图页面show出来

由于工作中使用的是angularJS，因此这里还是结合AngularJS一起，把地图整出来先。
首先是HTML页面

<html ng-app="myApp" xmlns:cursor="http://www.w3.org/1999/xhtml">
<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet"
          href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.css">

    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
            src="https://maps.googleapis.com/maps/api/js?key=（自己的key）&callback=initMap&libraries=&v=weekly"
            defer
    ></script>
    <style>
        #mapid {
            margin-top: 50px;
            margin-left: 150px;
            height: 80%;
            width: 80%;
        }
        #yuanyao{
            width: 400px;
            height: 400px;
            vertical-align: center;
        }

    </style>
</head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../app.css">
<link href="../lib/angular-material/angular-material.css" rel="stylesheet">
</head>

<body ng-cloak ng-controller="myController">
<div id="mapid" >

</div>
<script src="https://cdn.bootcss.com/angular.js/1.7.8/angular.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.8/angular-animate.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.8/angular-aria.js"></script>
<script src="https://cdn.bootcss.com/angular-material/1.1.17/angular-material.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="../app.js"></script>
<script src="../view16/view16.js"></script>

</body>
</html>

然后是js文件，（文件名要和html中引用的一致，不然引用不到）

'use strict';
var myApp = angular.module('myApp', ['ngMaterial', 'ngAria', 'ngMessages']);
myApp.controller('myController', function ($scope, $compile, $timeout) {
    $timeout(function() {
        initMap();
    },400);

    function initMap() {
        var map = new google.maps.Map(document.getElementById("mapid"), {
            zoom: 11,
            center: { lat: -25.363, lng: 131.044 },
        });
    }
});

这样在浏览器中打开，就会看到这样的地图
地图截图
如何获取key请根据这里的官网指南跟进get API key

2. 添加一个简单的marker

只需要new google.maps.Marker()并加入到地图即可

function initMap() {
        var map = new google.maps.Map(document.getElementById("mapid"), {
            zoom: 4,
            center: { lat: -25.363, lng: 131.044 },
        });
        var markerLocation = { lat: -25.363, lng: 131.044 };
        var marker = new google.maps.Marker({position: markerLocation, map: map});   
    }

map with marker

3. 添加一个自定义图片作为marker，并指定大小

我们首先需要一个图片，然后将其设置为自定义icon。然后设置marker使用该自定义icon作为图标。

 function initMap() {
        var map = new google.maps.Map(document.getElementById("mapid"), {
            zoom: 4,
            center: { lat: -25.363, lng: 131.044 },
        });
        var markerLocation = { lat: -25.363, lng: 131.044 };
        var marker = new google.maps.Marker({position: markerLocation, map: map});

        var haha = {
            url: "haha.png",
            size: new google.maps.Size(64, 64)
        };

        var hahaMarkerLocation = { lat: -21.333, lng: 130.014 };
        var hahaMarker = new google.maps.Marker({
            position: hahaMarkerLocation,
            map: map,
            icon: haha,
        });
    }

自定义marker
注意：尽量裁剪好图片的大小，这个方法不是整体缩小，而是裁剪部分。

4. 改变地图上的鼠标指针形状

这个与一般的地图，图片不一样。当我们想让鼠标悬浮在一张图片上时，鼠标指针改变为十字的形式，我们可以这样设置样式

 document.getElementById("id").style.cursor = "crosshair";

但是如果是google map上面，这样的设置是无效的，必须使用

map.setOptions({draggableCursor:'crosshair'});

这里的map为google map对象。
示例代码：
点击按钮后，移动到地图上的鼠标按钮将变为十字形式。

function initMap() {
        var map = new google.maps.Map(document.getElementById("mapid"), {
            zoom: 4,
            center: { lat: -25.363, lng: 131.044 },
        });
        var markerLocation = { lat: -25.363, lng: 131.044 };
        var marker = new google.maps.Marker({position: markerLocation, map: map});

        var haha = {
            url: "haha.png",
            size: new google.maps.Size(64, 64)
        };

        var hahaMarkerLocation = { lat: -21.333, lng: 130.014 };
        var hahaMarker = new google.maps.Marker({
            position: hahaMarkerLocation,
            map: map,
            icon: haha,
        });

        $scope.changeCursorToCrosshair =function() {
            map.setOptions({draggableCursor:'crosshair'});
        };
    }

cursor crosshair
当点击左下角按钮后，鼠标再进入地图区域，便会变成十字的形状。当然，还可以变成很多种其他形状。

url 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）

5. 其他

其他一些如添加polygon，添加矩形，圆形，三角形等，官网都有详细教程，这里不做赘述。

圆师傅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在页面中使用google map

最近一段时间，用到地图的地方比较多，之前一篇博客记录了用leaflet使用OSM地图的例子，这里再记录一下使用google map中遇到的一些问题。1. 首先把地图页面show出来由于工作中使用的是angularJS，因此这里还是结合AngularJS一起，把地图整出来先。首先是HTML页面<html ng-app="myApp" xmlns:cursor="http://www.w3.org/1999/xhtml"><head> <link href="ht
复制链接

扫一扫