uniapp: Google Maps, realizing map display, search function, H5 navigation

Page display

APP

H5

Google Maps function records, Google key application is relatively complicated and mainly requires some foreign identity information.

1. Apply for Google key

The following is a tutorial on the process of applying for a Google Maps API key:
Log in to the Google Developer Console: Open the browser and visitGoogle Cloud Platform Console.

1. Create or select a project: If you have not created a project yet, please click the "Select Project" button next to the drop-down menu in the upper right corner and click "New Project". If there is an existing project, select it.

2. Enable Google Maps API: In the project dashboard, click "APIs and Services" in the left navigation bar, and then click "Library".

3. Search for map-related APIs: Enter "Maps JavaScript API" (Google Maps JavaScript API) in the search box, and then click "Maps JavaScript API" in the search results.

4. Enable API: Click the "Enable" button on the page to enable the Google Maps JavaScript API.

5. Create credentials: In the left navigation bar, click "Credentials" and then click the "Create Credentials" button. Select "API Key".

6. Get API key: In the pop-up window, you can see the generated API key. Copy this key and use it later in your application.

7. Restrict API keys (optional): You can choose to impose some restrictions on API keys, such as setting IP address restrictions, enabling service restrictions, etc. This increases the security of your API keys.

Now, you have successfully applied for the Google Maps API key. Next, you can apply this key to your application and start using the functionality provided by the Google Maps API. Remember to protect your API key and do not share it publicly with others to ensure security.

2. Manifest.json configures the applied key

For positioning, you can choose system positioning, or apply for the Amap key yourself.

3. In the code part, H5 navigation is relatively simple. You only need to jump to Google Maps and bring the address thereAPI

let address = encodeURIComponent(this.detail.address);
let url = 'https://www.google.com/maps/search/?api=1&query='+address
// 谷歌地图
// #ifdef H5
location.href = url
// #endif
// #ifdef APP-PLUS
console.log(url);
plus.runtime.openURL(url)
// #endif

4. Implement APP map display and search functions. (The page needs to be NVUE)

<template>
	<view class="index">
		<!-- 这里是状态栏 -->
		<view :style="{ height: iStatusBarHeight + 'px'}"></view>
		<view class="navbar">
			<image src="../../static/icon/0.png" mode="" class="arr" @click="go('none')"></image>
			<text class="btn" @click="go">confirm</text>
		</view>
		<map style="width: 750rpx;height: 500rpx;" :longitude="longitude" :latitude="latitude" :scale="scale"
			:markers="markers" :include-points="includePoints" :show-compass="true" :show-location="true">
		</map>
		<view class="list">
			<view class="search">
				<input type="text" v-model=