个人中心
gpt4 book ai didi

javascript - Google map 更改中心

转载 作者：行者123 更新时间：2023-12-03 12:11:13 26 4
gpt4 key购买 nike

我正在尝试在 AngularJS 中创建一个具有多个位置的应用程序，您单击其中一个位置，它会将您带到 Google map 中的位置。我在单击某个位置时重新定位 map 时遇到问题。我想我需要添加一个事件监听器，但我不确定。创建 map 的代码位于 initialize() 中。这是代码:

var app = angular.module('app', []);
app.controller('firstCtrl', function($scope) {

  $scope.ASiteLocs = [Locations Contained Here...];
  $scope.SSiteLocs = [Locations Contained Here...];
  $scope.SiteLocs = $scope.SSiteLocs.concat($scope.ASiteLocs);

  angular.forEach($scope.SiteLocs, function(location) {
    var clength = location.Point.coordinates.length;
    if (location.Point.coordinates.substring(clength - 2, clength) === ",0") {
      location.Point.coordinates = location.Point.coordinates.substring(0, clength - 2).split(",");
      Lat = location.Point.coordinates[0];
      Lon = location.Point.coordinates[1];
      Com = ",";
      location.Point.coordinates = Lon.concat(Com, Lat);
    }

    angular.forEach($scope.SSiteLocs, function(object) {
      object.carrier = 'Sprint';
    });
    angular.forEach($scope.ASiteLocs, function(object) {
      object.carrier = 'AT&T';
    });
  });

  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(41.894465, -88.460500),
      zoom: 12
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
      mapOptions);

    var marker = new google.maps.Marker({
    position: site.Point.coordinates,
    map: map,
    title: 'Click to zoom'
  });

    google.maps.event.addListener(map, 'center_changed', function() {
    window.setTimeout(function() {
      map.panTo(site.Point.coordinates);
    }, 1000);
  });

    google.maps.event.addListener(marker, 'click', function() {
      map.setZoom(8);
      map.setCenter(site.Point.coordinates);
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);



  $scope.headerShow = false;
  $scope.tableAttrs = {
    hide: false
  };
});

和 HTML:

<!DOCTYPE html>
<html ng-app="app">

<head>
  <style type="text/css">
    html {
      height: 100%
    }
    body {
      height: 100%;
      margin: 0;
      padding: 0
    }
    #map-canvas {
      height: 100%
    }
  </style>
  <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
  <script data-require="angular.js@*" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script data-require="google-maps@1.0.0" data-semver="1.0.0" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script data-require="angular-route@*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
  <script src="map.js"></script>
  <script src="ShowHide.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0wdLb9-Os4YVxn_JR2sY08xEN-1aJkMM"></script>
  <title>Site ID</title>
</head>

<body link="white" vlink="white">
  <pin>Site ID</pin>
  <center>
    <div id="header" ng-hide="tableAttrs.hide">Site Finder</div>

    <div ng-controller="firstCtrl">

      <input type="text" ng-model="search" border="3" placeholder="Please enter site name..." ng-hide="tableAttrs.hide">
      <div link="white" vlink = "white">
      <button id="btn2" ng-click="tableAttrs.hide = !tableAttrs.hide" ng-hide="!tableAttrs.hide" class="button-Overlay">Back To Search</button></div>
      <table border="1" width="100%" ng-hide="tableAttrs.hide" class="buttonOverlay">
        <thead>
          <tr>
            <td><center>Name</center></td>
            <td>Carrier</td>

          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="site in SiteLocs | filter : search">
            <td>
           <button id="btn1" ng-click="tableAttrs.hide = !tableAttrs.hide">
              {{site.name}}
             </button>
            </td>

            <td>
              {{site.carrier}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>


  </center>
  <div id="map-canvas" ng-show="!hideAttr"></div>
</body>

</html>

最佳答案

尝试在单击其中一个位置时使用此功能:

map.setCenter(new google.maps.LatLng( lat, lon ) );

您可能需要一种方法将位置的经纬度传递给脚本。

关于javascript - Google map 更改中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24957393/

26 4 0
文章推荐： javascript - ng-click 无法正常工作
文章推荐： javascript - 忽略某些元素的 ng-blur 事件
文章推荐： javascript - Html5 支持对复选框进行 SelectAll
文章推荐： javascript - 将单击事件触发到链接上的单击处理程序中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com